How to Implement Text Decoration Using CSS

Underlining a document or a text is always considered easy. But if we consider the case for the websites, is it easy yet? Most of us would say yes but making a horizontal line including some custom designs make this simple task tiresome. Let start the Journey of Text Decoration Using CSS in the following manner:

• What is Text Decoration?
• Types of Text Decorations in CSS
• Text Decoration Using CSS: Code
• Text Decoration Skip

What is Text Decoration?

It sets the appearance of the decorative lines on text. It is a shorthand property for:

• text-decoration-line
• text-decoration-color
• text-decoration-style

It is specified as one or more space-separated values representing the long-hand text-decoration properties.

Syntax:

text-decoration : <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

Where,

• text-decoration-line: It is used to set the kind of decoration used such as underline, overline, and line-through.

• text-decoration-color: It is used to set the color of the decoration.

• text-decoration-style: It is used to set the style of the line such as  solid, wavy, dotted, dashed, double

Types of Text Decorations in CSS

• Overline:

#decoration
{
text-decoration: overline;
}

• Line-Through:

#decoration
{
text-decoration: line-through;
}

• Underline:

#decoration
{
text-decoration: underline;
}

• Combination:

#decoration
{
text-decoration: underline line-through overline;
}

Output:

Text Decoration Using CSS : Code

HTML Code:

<center>
<h1 id="overline">A quick brown fox jumps over the lazy dog</h1>
<h1 id="underover">A quick brown fox jumps over the lazy dog</h1>
<h1 id="dotted">A quick brown fox jumps over the lazy dog</h1>
<h1 id="wavy">A quick brown fox jumps over the lazy dog</h1>
</center>

CSS Code:

#overline
{
text-decoration: wavy overline lime;
}
#underover
{
text-decoration: dashed underline overline;
}
#dotted
{
text-decoration: underline overline dotted red;
}
#wavy
{
text-decoration: line-through wavy;}

Output:

Text Decoration Skip

A property known as text-decoration-skip can also be used where a text overline, line-through and underline. It helps in decorating the text. It simply specifies how overline and underline are drawn when they pass over ascenders and descenders.

#decoration
{
text-decoration-skip: ink;
}

Values which can be used with text-decoration skips are:

• objects: (default) line skips inline objects, like images or inline-block elements.

• none: line crosses everything.

• spaces: decoration line skips spaces, word-separator characters, and any spaces set with letter-spacing or word-spaces.

• ink: decoration line skips glyphs, descenders or ascenders.

• edges: decoration line starts slightly after the content’s starting edge and ends slightly before the content’s ending edge.

• box-decoration: decoration line skips over inherited margin, border, and padding.

Since this property is not supported by any browser yet there’s no demo, but here’s an example in the image below of how each of the values could look once text-decoration-skip is implemented.

With this, we come to the end of this  Text Decoration Using CSS blog. If you have any queries regarding this topic, please leave a comment below and we’ll get back to you.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of “Text Decoration using CSS” blog and we will get back to you.