HTML and CSS Reference
In-Depth Information
Figure 4-9.
The text-decoration property draws a line under, over, or through text or any combination
In CSS2.1, the color of the line is inherited from the text.
Changes to text-decoration in CSS3
The CSS3 Text module proposes improvements to the
text-decoration
property that allow you to set a different
color and change the style of the line. CSS3 introduces four new properties:
text-decoration-line
This takes the same values as
text-decoration
in CSS2.1,
except
blink
, which has been dropped.
text-decoration-color
This sets the color of the line(s).
text-decoration-style
This sets the style of the line(s). Accepted values are
solid
,
double
,
dotted
,
dashed
, and
wavy
. The default is
solid
.
text-decoration-skip
This specifies which elements, if any, the line(s) should
skip over. Accepted values are
none
,
objects
,
spaces
,
ink
, and
edges
. The default is
objects
, which skips over images and inline blocks. The meaning of
spaces
is self-
explanatory. Specifying
ink
prevents the line(s) from being drawn over a character. The
edges
keyword is mainly for use in Chinese. It creates a separate line for each character
in a group rather than one solid line.
he
text-decoration
property itself becomes the shorthand for these four new properties. This ensures
backward compatibility with CSS2.1 and older browsers. However, it means you need to be careful when
using the new properties in combination with
text-decoration
because the shorthand version overrides any
previously set values.
To maintain cross-browser compatibility, you need to specify
text-decoration
first for older browsers,
followed by the new properties to enhance the display in browsers that understand them. If you put
text-decoration
last, the other properties won't be applied.
Currently, no browser supports
text-decoration-skip
. However, Firefox has supported the three other
CSS3 properties with the
-moz-
browser-specific prefix since version 6. It's also a good idea to follow the browser-
specific versions with the official properties so they'll be used as soon as browsers support them, for example like
this:
