CSS better use Text-decoration properties to display text effects

The Text-decoration property can do a lot of things, and we'll learn more about this property to implement more detailed styles.

Text can have more decorations

For example:

A
Text-decoration:underline overline;
}

You can see the content text-decoration decorated in almanac, and more specifically, it adds multiple property values to the Child property text-decoration-line.

Change the color of the decoration

The underline color defaults to the text setting color's property value, but you can change:

A
Text-decoration-color: #f06d06;
}

Observe the content Text-decoration-color modified in Almanac.

Note that the underline in the gecko is rendered below the font, whereas the underline in the Webkit/blink is rendered above the font:

Now processing color underlines generally use border instead of text-decoration. The border can control the color, width, and position of the underline more independently than the text-decoration.

But there are some things border can't do, just like ...

Change the style of decoration

Border can't implement the following style!

A
Text-decoration-style:wavy;
}

Observe the content Text-decoration-style in almanac.

It's going to get better.

There are many ways to better implement underlined text today. For example, using skip can improve readability, just like the following:

The example above is implemented with Text-decoration-skip, but not all browsers support it. At the same time, it may be better to use a looser underline and reduce the value of contrast-y, where RGBA () is used:

Text-decoration

A hidden underline is just a function of its (text-decoration), and you can also use skip to modify some inline elements, spaces, and even control edges.

It is worth noting that the Safari/ios browser appears to use the default skip value.

Summary

Html

<div class= "Style" >   line:   <button>underline</button>    <button>line-through</button>   <button>overline</button> </div> <div  class= "Color" >   color:   <button>black</button>   <button
>red</button>   <button>gray</button> </div> <div class= "Skip" >   skip:   <button>objects</button>   <button>spaces</button >   <button>ink</button>   <button>edges</button>   <
Button>box-decoration</button>   <button>trailing-spaces</button> </div> <p class= "SOLID" >text-decoration-style: solid;</p> <p class= "Double" > text-decoration-style: double;</p> <p class= "Dotted" >text-decoration-style: dotted; </p&Gt <p class= "Dashed" >text-decoration-style: dashed;</p> <p class= "wavy" > Text-decoration-style: wavy;</p>

CSS

.solid {    text-decoration-style: solid; } .double {    
text-decoration-style: double; } .dotted {    text-decoration-style: dotted; } .dashed {     text-decoration-style: dashed; } .wavy {    text-decoration-style: wavy;  }/* styling for pen, unrelated to text-decoration-style */body {
    font-family: sans-serif; } p {  text-decoration: underline;   font-size: 2em;} div {  
line-height: 1.5; } JS $ (". Style button"). On ("Click",  function ()  {  $ ("P"). CSS ("Text-decoration-line",
 $ (This). text ());
}); $ (". Color button"). On ("Click",  function ()  {  $ ("P"). CSS ("Text-decoration-color",
 $ (This). text ());
}); $ (". Skip button"). On ("Click",  function ()  { &NBsp;$ ("P"). CSS ("Text-decoration-skip",  $ (This). text ()); });

the Text-decoration property becomes a property shorthand

Following the latest CSS specification, Text-decoration is now writing like this:

A
Text-decoration:overline Aqua Wavy;
}

The Text-decoration attribute now needs to be represented by three property values: Text-decoration-line, Text-decoration-color, and Text-decoration-style.

Unfortunately, only Firefox is currently implementing these new properties.

You can use the Firefox browser to try the following demo:
HTML code

<a href= "#" id= "a" >it ' like WATER, people

(You should the wavy line on top.) Currently works (Firefox)

CSS Code


Body {
padding:30px;
Text-align:center;
Font-family:arial, Sans-serif;
}

A, a:visited {
Color:blue;
Background:aqua;
-moz-text-decoration-color:aqua;
-moz-text-decoration-line:overline;
-moz-text-decoration-style:wavy;
Text-decoration-color:aqua;
Text-decoration-line:overline;
Text-decoration-style:wavy;
}

Demonstrate


In this demo, we don't use shorthand, but we describe each property separately. This is a better way to ensure the backward compatibility of browsers, so that browsers that do not currently support this type of writing will not be affected.