How to add some text to a hr tag?

Question

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

Answer 1

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.