CODEWITHSUNDEEP
htmlcss
Michael Peterson
Michael Peterson

Reputation: 1123

Underline full width of paragraph (even if text doesn't extend all the way)

I'm trying to create the look of a recipe card online:

enter image description here

As such, I am trying to have the underline go the full width of the paragraph, even if the text does not. Right now, I am trying to use text-decoration: underline, but it only extends as long as the text:

HTML:

<div>
  <p>Lorem ipsum...</p>
</div>

CSS:

p {
    border-bottom: 1px solid #000;
    display: inline;
    width: 200px;
}
div {
    width: 400px;
}

JSFIDDLE: http://jsfiddle.net/FYNAM/1/

Any suggestions?

Upvotes: 4

Views: 6446

Answers (4)

Muhammad Sariminn
Muhammad Sariminn

Reputation: 16

.rtv {
  position: relative;
}

.abs {
  position: absolute;
}

.full-underline {
  width: 100%;
}

.full-underline span {
  display: block;
  width: 100%;
  height: 20px;
  border-bottom: 0.8px solid black;
}
<div class="content tl m20 rtv">
  <div class="full-underline abs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

  <h3>NAMA PEKERJAAN :</h3>
  <h1>PEKERJAAN EMERGENCY PEMBERSIHAN BENDA ASING DI TOWER 07 SECTION NGENA-TUBAN</h1>
</div>

enter image description here

You can adjust the span height with the size of the text

Upvotes: 0

ravk
ravk

Reputation: 394

add following to your css:

div { display: block; width: 100%; }
div > p { display: block; width: 100%; }

or, you could also try:

div { width: 100%; }
div > p { display: block; }
*remove width from 'p'

It should solve your issue.

Upvotes: 0

LOTUSMS
LOTUSMS

Reputation: 10240

You can solve this by modifying what happens after your p tag as follows 

p:after {
    content:  " ______________________________________________";
}

This was a quick down and dirty solution, but I think you'll be smart enough to take it from here ;)

Good luck.. and great question! You had my vote

DEMO

Upvotes: 0

Alex Shkolnikov
Alex Shkolnikov

Reputation: 124

Stupid solution, but if your line height is the same across all <p> (no nested elements with different line-height) you can use background image.

Upvotes: 2

Related Questions