Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to customize the underline style of HTML". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian slowly and deeply to study and learn "how to customize the underline style of HTML" together!

text-decoration property

Specifies modifiers to add to text.

none: indicates standard text, no style

Underline: Underline for text

Overline: Indicates a line on the text.

line-through: indicates a line through the text, generally indicates a strikethrough

blink: indicates blinking text.

Example:

PHP Chinese Net

PHP Chinese Net

PHP Chinese Net

Effect drawing:

Image20.jpg

The underline defined by text-decoration cannot change color or set its thickness. So we can customize underscores in other ways

Underlined customizations:

1) The border-bottom method

When using border-bottom to underline text, you can change the color, thickness, and style of the underline.

However, it should be noted that when the element is a block-level element, the underscore is not only the length of the text content, it will occupy a full line, then you need to convert the block-level element to a line-level element through display: inline. So the length of the text is the same as the length of the underscore.

Example: Make the underline pink 2px thick

PHP Chinese Net

Effect drawing:

Image21.jpg

(2) Background-image method

In the background-image method, underline is set by using a linear gradient method. Here, it is still necessary to remember that when an element is a block-level element, change it to a row-level element.

Example:

h2{

display:inline;

background-image:linear-gradient(toright,pink60%,transparent10%);

background-position:0100%;

background-repeat:repeat-x;

background-size:8px3px;

padding-bottom:10px;

}

Thank you for reading, the above is "HTML how to customize underline the style" of the content, after the study of this article, I believe that we have a deeper understanding of how to customize HTML underline the style of this problem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.