HTML/CSS Underline full width

Question

I'm trying to figure out how to make the underlines/borders full width for each line without adding
in the paragraphs. Does anyone have any ideas how I should approach this?

The two solutions I have so far is to add the or create an image of it, but that is not the ideal case.

Any help is appreciated, thank you.

HTML

<p>We are always on the lookout for great talent. Please send in your resume or portfolio to test@test.com. The following positions are open.</p>

CSS

p {
    border-top: thin soild #000;
}

Answer 1

If the line height is fixed you could do it with a gradient:

p{
  line-height: 20px;
  color: #333;
  background-image: 
    repeating-linear-gradient(180deg, transparent, transparent 19px, #333 20px);
}

http://jsfiddle.net/t2VG4/

Answer 2

Just put text into span element.

http://jsfiddle.net/nukec/3bUFC/

<span style="border-bottom: 1px solid red">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </span>

Answer 3

The CSS solution would be to set the line-height (30px here) and then adjust the stop locations on the repeating-linear-gradient to align with the text (29px and 30px):

p {
    line-height:30px;
    background-image: repeating-linear-gradient(180deg, transparent, transparent 29px, grey 30px);
    border-top:1px solid grey;
}

However, keep in mind that each browser engine's gradient generator was built towards smooth color transitions, not pixel-crisp edges, so your results may vary. The best solution would probably be to create a tiling image (with transparency and a horizontal line) and use that as the background-image .

Answer 4

I had a minor issue where the lines appeared as gradients, the fix was to specify that the switch from transparent to black took place over 0.1px so that its undetectable

p {line-height: 27px;
    color: #333;
    background-image: repeating-linear-gradient(180deg
, transparent, transparent 24px, #333 24.1px, #333 25.1px);
}