Pro HTML5 and CSS3 Design Patterns

CHAPTER 10 ■ STYLING TEXT

Text Decoration

Problem You want to use a custom style for underlines, overlines, and line-throughs.^

Solution Use text-decoration to put a line under, over, or through text. The line’s color is the text’s
color, and the browser determines its thickness.
You can also use the border property to create an underline or an overline.
Use border to control the thickness, style, and color of the line.
You can also use the background-image property to create an unlimited variety of
underlines, overlines, and line-throughs. By tiling images, you can create any pattern in any
thickness in multiple colors.
Use background-image to specify an image for the text decoration.

Use background-position to set the location of the text decoration.

Use background-repeat:repeat-x to tile the image horizontally.

Use padding-top or padding-bottom to insert vertical space between the text decoration

and the text.

Patterns Text Decoration

INLINE-SELECTOR { text-decoration:underline; }INLINE-SELECTOR { text-

decoration:overline; }INLINE-SELECTOR { text-decoration:line-through; }

Border Underline

INLINE-SELECTOR { border-bottom:WIDTH STYLE COLOR; }

Border Overline

INLINE-SELECTOR { border-top:WIDTH STYLE COLOR; }

Background Underline

INLINE-SELECTOR { background-repeat:repeat-x; background-position:left

bottom; background-image:url("FILE.EXT"); padding-bottom:+VALUE; }

Background Overline

INLINE-SELECTOR { background-repeat:repeat-x; background-position:left top;

background-image:url("FILE.EXT"); padding-top:+VALUE; }

Background Line-through

INLINE-SELECTOR { background-repeat:repeat-x; background-position:left
center; background-image:url("FILE.EXT"); padding-bottom:+VALUE; }

Location This pattern applies to inline elements.

Tip Transparent GIFs as background images integrate well with different background colors.

Related to Border, Background (Chapter 6)