CODEWITHSUNDEEP
htmlcss
Gandalf
Gandalf

Reputation: 13693

How to add some text to a hr tag?

I am trying to have some text towards the end of a hr tag and so far I haven't managed to get it working as it should.

I am expecting to have a line --------------------- top with some text towards the end.
You can see my fiddle here http://jsfiddle.net/2BHYr/

Edit:

What i want is:

__________________________Top

Upvotes: 3

Views: 14610

Answers (3)

InanisAtheos
InanisAtheos

Reputation: 632

I believe I have understood what it is you want. Here is the fiddle:
http://jsfiddle.net/fMJm2/2/ (Updated with Version 2 as well.)

HTML:

<div class="separator">
    <hr>
    <a href="#top">To Top</a>

</div>

CSS:

.separator {
    margin-top: 100px;
    text-align: right;
    position: relative;
}

.separator hr {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.separator a {
    position: absolute;
    right: 0px;
    top: 0px;
    font-style: italic;
    background: #fff;
    z-index: 10;
    padding: 2px 20px;
}
​

In my code, I have wrapped everything in a div with class separator for ease.

  • .separator gets it's position set to relative in order for more control over the child elements.
  • hr gets position absolute and so does the link. This is in order to be able to position the <a> tag on top of the <hr>.
  • The link is set to right: 0 with a bit of padding, and ends up to the right and on top of the <hr>. I believe this is what you want to achieve.

Version 2:
Per OP's request, I've re-mixed the above code to work without a <hr> tag. Semantically it would make sense with a <hr>, but OP's circumstances does not allow for it to be used.

HTML:

<div class="separator_v2">
    <a href="#top">To Top</a>
</div>

CSS:

.separator_v2 {
    margin-top: 100px;
    text-align: right;
    border-top: 1px solid #000;
    overflow: visible;
}
.separator_v2 a {
    margin-top: -12px;
    display: block;
    font-style: italic;
    background: #fff;
    z-index: 10;
    padding: 2px 20px;
    float: right;
}​

The use of negative margin is what makes this work. Despite popular belief, negative margin is not a hack, it's W3C compliant.

Upvotes: 1

Deepan Babu
Deepan Babu

Reputation: 515

Check this fiddle:

http://jsfiddle.net/53vD8/2/

It gives a HR line followed by a link.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <div class="layer">
        <div class="line simple"></div>
        <a href="#" class="top_a">Top</a>
    </div>
    <div class="layer">
        <div class="line simple"></div>
        <a href="#" class="top_a">Top</a>
    </div>
</body>

CSS

.layer
{
    margin-top:10px;
    margin-bottom:10px;
}

.line.simple
{
    width:90%; 
    height:0px; 
    display:block;
    position:relative;
    border-style:solid; 
    border-width:1px 0 0 0; 
    float:left;
    margin:15px 0 0px; 
}

.top_a
{ 
    padding-left:5px; 
    font:italic 12px/18px Georgia, sans-serif;
}

Upvotes: 1

Jake
Jake

Reputation: 690

Why do you need a HR tag for this? Try this instead: Put the text in a DIV with width 100%, set the top or bottom border to 1 solid and align the text to the right.

.hr-div {
  width: 100%;
  text-align: right;
  border-style: solid;
  border: 0px 0 1 0
}

<div class="hr-div">Top</div>

Upvotes: 0

Related Questions