CODEWITHSUNDEEP
javascripthtmlcss
ttran4040
ttran4040

Reputation: 170

HTML/CSS Underline full width

enter image description hereI'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 [email protected]. The following positions are open.</p>

CSS

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

Upvotes: 4

Views: 5743

Answers (5)

OldManRiver
OldManRiver

Reputation: 156

Absolutly not, must be a totally blank underline full page width.

TBNK

Upvotes: 0

N Kuria
N Kuria

Reputation: 162

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

Upvotes: 1

PMG
PMG

Reputation: 190

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.

Upvotes: 0

nice ass
nice ass

Reputation: 16729

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/

Upvotes: 5

sensei
sensei

Reputation: 7592

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>

Upvotes: 0

Related Questions