Text Decoration with CSS

You can control text with CSS as well, and there are many different aspects of type that you can control with it. One aspect of type that you can control is how it is decorated. In this tutorial we will go over the different styles that you can apply to decorate or emphasize your text.

This specification in CSS is usually used to specify that links are not underlined, because most browsers specify for links to be underlined by default. You can stop this by setting text decoration to none for that text element.

a {  
    text-decoration: none;
}

If you want certain text elements to be underlined, then you can specify that style with this property.

a {  
    text-decoration: none;
}
ul li ul li a {  
    text-decoration: underline;
}

If you want an element to have a line over the text (Which isn’t common) then you would specify the overline style. This places a line over the text element.

a {  
    text-decoration: none;
}
ul li ul li a {  
    text-decoration: overline;
}

You can create a strike through type style by using the line-through property. This makes your text look like it has been crossed through.

a {  
    text-decoration: none;
}
ul li ul li a {  
    text-decoration: line-through;
}