Underlining and italics with CSS

Is it possible to create heavier underline and smoother italics?

[pweaver]

Hi,

I'm wondering if it is possible to use different weights of underlines for text (not links).

I am looking for something thicker than what <span style="text-decoration: underline">underline words</span> gives me.

Also, any tricks for changing the look of italicized text to make it stand out more?

Thanks for your help!

[benihana]

You could try:

"border-bottom:3px solid #000; padding-bottom:3px;"

and adjust to suit. Maybe just bold the italics to get it to stand out.

ben

[pweaver]

Thanks benihana,

I added that and it did make the underline heavier, but the underline was overlapping the line below.

So I set it to
"border-bottom:2px solid #000000; padding-bottom:0px;"
instead and the underline is still not tight enough to the word.

Then I tried padding-bottom:-1px; as a shot in the dark, but it didn't get any closer. I guess 0px is as close as it will get?

[createErrorMsg]

I guess 0px is as close as it will get?

Since you are using the border property instead of text-decoration, the distance from the text will be determined by the height of the element. Since text elements reside in inline boxes, the key to moving that border-bottom up higher is to decrease the line-height.

Line-height values can be either numbers with units, as in line-height: 12px;. Or as numbers with no units, as in line-height: 1.5;. The latter calculates the line-height as a multiplier of the font-size, or 1.5 times the height of the font.

Play around with different numbers until it looks right to you.

[MatthewHSE]

You could use a gif set as a background image. Make it 1px wide and as many pixels tall as you want. Then, use something like the following:

span.underline {
background-image: url(underline.gif);
background-position: bottom left;
background-repeat: repeat-x;
}

Then in your HTML:

<span class="underline">This text uses a gif image for an underline effect.</span>

I've seen this used for some really neat effects, as elaborate as animated hover effects for links. Pretty cool, in a way . . .