CODEWITHSUNDEEP
htmlcss
castors33
castors33

Reputation: 487

Draw a line after the text to the end of line

I have a title for a page, I want to have a line that begins after the text and that goes to the end of the line, whatever is the width of the window, kind of :

TITLE----------------------------------------------------------------------------

but a full line, I just wrote it with -for demonstration. I saw <hr> but it always go the line after, it doesn't stay after the text. I also saw this post but that's not exactly what I want.

Thanks!

Upvotes: 1

Views: 9942

Answers (6)

Wittig
Wittig

Reputation: 25

This question may be old, but I needed this effect today and achieved it using an absolutely positioned CSS pseudo-element. First, place a wrapper around the text of your element in HTML:

    <h3>
        <span>Title</span>
    </h3>

We will use this span to cover up the part of the line (pseudo-element) that overlaps with the text. This will give the effect of a line from the end of the text to the end of the line, but in reality the line is always 100% width of the container.

    h3 {
      /* we will absolutely position the line relative to the parent element (h3) */
      position: relative;
      z-index: 1;
    }
    h3 span {
      background: #dedede;   /* make this the same color as the page background! */
      padding-right: 0.5em;  /* this will be the 'margin' from the text to the line */
    }
    /* Add Line After Text*/
    h3 span::after {
      content: '';
      width: 100%;
      height: 2px;
      background: #919098;
      /* position the line within the parent element */
      position: absolute;
      bottom: 0.5em;                           /* half the height of the text from the bottom */
      left: 50%; transform: translateX(-50%);  /* horizontally center it */
      z-index: -1;                             /* display it behind the parent */
    }

Results of this Method

I did this with a heading element, but you can easily use this effect on a paragraph or other element by swapping tags around. Best of luck!

Upvotes: 2

Alexandre Khoury
Alexandre Khoury

Reputation: 4032

I know that my answer is a bit late but it was long to do what you wanted.

HTML : <span id="test" >HI</span>

JS :

document.getElementById("test").style.position="relative";
var line=document.createElement("div");
line.setAttribute("style","width:"+(document.getElementsByTagName("html")[0].offsetWidth-document.getElementById("test").offsetWidth-1)+"px;height:1px;position:absolute;top:6px;left:"+(document.getElementById("test").offsetWidth+1)+"px;background-color:black;");
document.getElementById("test").appendChild(line);

Fiddle : http://jsfiddle.net/QrEgH

Bonus :
1-No CSS, just a small block of JS.
2-A very small HTML, you just add the span.
3-This fiddle that is less compressed and with comments : http://jsfiddle.net/VfCJ3

Upvotes: 1

walmik
walmik

Reputation: 1452

Ok, here s another answer. You can just use a fieldset element instead

  <fieldset>
  <legend>Title comes here</legend>
  </fieldset>

and style it this

fieldset { border-top:1px solid #333; }

Here s a demo: http://jsfiddle.net/SQujE/

Upvotes: 3

David B&#233;langer
David B&#233;langer

Reputation: 7438

Try this :

Title<hr style="display: inline-block; width: 90%; margin-bottom: 4px; margin-left: 5px;" />

Based on saganbyte's answer. margin-bottom play with the offset from the bottom and margin-left from the left. Logic isn't ?

Upvotes: 1

walmik
walmik

Reputation: 1452

For the hr element you can use the CSS property display with the value inline-block along with a width

hr { display: inline-block; width: 90%; }

and in your HTML,

Title<hr />

Demo: http://jsfiddle.net/67f2E/

A little variation with the word 'Title' and the hr element aligned vertically to middle: http://jsfiddle.net/wHPQA/

Upvotes: 2

John Humphreys
John Humphreys

Reputation: 39354

Try having two DIV elements. The first one can be 100% page width and can have the second one in it.

Let the inner DIV contain your "Title" text and autosize itself. Make the background of the outer div an image of a line, and make the background of the inner div the same color as the normal page background.

Upvotes: 2

Related Questions