HTML and CSS Reference
Everything you ever wanted to know about
text decorations in less than one page
Text decorations allow you to add decorative effects to your text like underlines, overlines,
and linethroughs (also known as a strikethrough). To add a text decoration, just set the
text-decoration property on an element, like this:
This rule will ca use the
<em> element t o have a
line through th e middle
of the text.
You can set more than one decoration at a time. Say you want underline and overline at
the same time—you specify your text decoration like this:
This rule result s in the <em>
element having an underline
text-decoration: underline overline;
And if you have text that is inheriting text decoration you don't want, just use the value “none”:
Q: So if I have two different rules for an <em>, and one
specifies overline and the other underline, will they be added
together so I get both?
A: No. You need to combine the two values into one rule to get
both text decorations. Only one rule is chosen for the text-decoration,
and decorations in separate rules are not added together. Only the
rule that is chosen for the text-decoration styling will determine the
decoration used, so the only way to get two decorations is to specify
them both in the same text-decoration declaration.
Q: I've been meaning to ask why the color property isn't
A: The color property really controls the foreground color of an
element, so it controls the text and the border color, although you can
give the border its own color with the border-color property.
Q: I like the linethrough decoration. Can I use it on text I'm
editing to indicate things that need to be deleted?
A: You could, but there's a better way. HTML has an element
we haven't talked about called <del> that marks content in your
HTML as content that should be deleted. There is a similar element
called <ins> that marks content that should be inserted. Typically
browsers will style these elements with a strikethrough and underline,
respectively. And with CSS, you can style them any way you like. By
using <del> and <ins>, you are marking the meaning of your content
in addition to styling it.