Full Stack Developer Masters Program (28 Blogs) Become a Certified Professional

How to Implement Text Decoration Using CSS

Published on Aug 22,2019 19 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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?

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;
}

Overline-text-decoration-using-css

 

  • Line-Through:

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

Line-Through

  • Underline:

#decoration
{
text-decoration: underline;
}

Underline-Text-Decoration-using-CSS

 

  • Combination:

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

Output:

Combination

 

 

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:

Output-Text-Decoration

 

 

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;
}

skip-text-decoration-css

 

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.

final-image-text-decoration

 

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.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.