CSS text-decoration

 CSS text-decoration is used to make special effects for the text of the webpage, such as adding the effect of text on line, text underline or strikethrough, instead of the time-consuming work of using HTML tags to mark webpage text one by one. Text-decoration can be used easily and quickly To manage text effects in web pages, web designers often use this trick to directly manage the bottom lines of text hyperlinks in the entire web page . Text-decoration is the standard syntax for CSS text effects, and all mainstream browsers currently support it.

CSS text-decoration basic syntax

text-decoration: text effect parameters;

The most commonly used text effect parameters in the grammar are overline, underline, and line-through. You can check the parameters and wording of these effects through the following table . The default parameter is none It does not need to display any text effects, in fact, it means that this function is not needed.

CSS text-decoration commonly used special effect parameters and effects

parameter	grammar	Description	Present
none	text-decoration:none;	The default value does not display any text effects	Test none effect
overline	text-decoration:overline;	Add online for text	Test the effect of overline
underline	text-decoration:underline;	Add a bottom line to the text	Test the underline effect
line-through	text-decoration:line-through;	Strikethrough text	Test the line-through effect
blink	text-decoration:blink;	Added a flashing effect to the text, which has been cancelled.	Test blink effect
inherit	text-decoration:inherit;	Text effect inherited from parent layer	No test effect

The last two parameters in the commonly used parameter list, blink and inherit, are recommended not to be used. The blink that makes the text appear flickering seems to have been cancelled. Most browsers do not support this parameter. Originally FireFox also supports the blink attribute, but I don’t know why. It is not supported. It is unclear whether it will be re-supported in the future. Inherit is because some browsers do not support the effect of inheriting the properties of the parent layer, especially IE7 or earlier browsers. In order to avoid writing no effect, you should Try to avoid it.

CSS text-decoration example 1: text strikethrough

<span style="text-decoration:line-through">Text mark strikethrough</span>

Sample output

Strikethrough text

It is a common standard practice to mark text through span tags and add style. The same technique can also be used in DIV blocks. In addition, style can also be written in HTML font text tags, but HTML5 does not support HTML font The attributes in the text tag are still based on the standard CSS writing.

CSS text-decoration example two, remove the default bottom line of the hyperlink

<a href="#" style="text-decoration:none;">Test to remove the default bottom line of hyperlinks</a>

Sample output

Test to remove the default bottom line of the hyperlink

The default hyperlinks of the browser usually have a bottom line. In order to conform to the style of web design, designers often hide the bottom line of the hyperlink . For example , add "style="text-decoration:none;"" in the hyperlink . This way of writing means that the display style of this hyperlink has no bottom line. Modifying the hyperlink is a very common application of text-decotation.