How to customize the style of underline in HTML
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!
