How To Add Some Text To A Hr Tag?

April 26, 2023 Post a Comment

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

Solution 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.

Solution 2:

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;
}

Solution 3:

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>

Html5 Guide

How To Add Some Text To A Hr Tag?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Add Some Text To A Hr Tag?"