Use CSS to customize the underline style of a webpage

CSS provides webpage designers with a rich and flexible way to control the expression of page elements. However, you may have noticed that CSS does not provide many optional operations for underlines. In general, the underlines that people see are basically straight lines, lacking anger and flexibility. However, the road is not dead. Through some wonderful changes, we can still make creative underlines to make the page more beautiful.

This is an example of a custom underline: a custom underline. Is it cool? In addition to providing a distinctive style for your webpage, it also provides different visual appearances for different text types in the document, which can serve as a reminder or focus.

Next, let's learn how to customize special underlines.

First, we have to prepare an underline image. You can use the first-to-hand rendering. Note that the image you prepare should be suitable for horizontal repetition. It is best to make the GIF format transparent so that the background is not blocked.

In addition, if the underline image you prepare occupies a large number of pixels in height (width), you should increase the line-height space between the text line and the downstream text, you can set it as follows:

P {line-height: 1.5 ;}
The next step is to cancel the default underline so that we can apply the custom underline to the specified text, use the following CSS settings (which means that the hyperlink text is not modified ):

A {text-decoration: none ;}
Now, you can create a custom underline. Here, we use the prepared Image to set it as the background image of the hyperlink element, as shown below:

A {background-image: url(underline.gif );}
Of course, the text length may not be equal to the source image length, so we need to consider the image duplication problem. That is to say, we should limit the repetition to the x axis in the horizontal direction, which can be set as follows:

A {background-repeat: repeat-x ;}
Another question that must be considered is how to change the word size? To keep the underlined image under the hyperlink text without having to ignore the text size, we should use the background position (background-position) in CSS) property to locate the image at the bottom of the hyperlink element. For underline images such as arrows, the text edge and image edge alignment of hyperlinks must be considered.
In the following example, the position of the underline background image is limited to the lower right corner:

A {background-position: 100% 100% ;}
How can I control the white space between a custom underline image and text? This can be done by adding padding. The exact position of the underline image relative to the hyperlink text baseline and the size of the words used. We recommend that you set the size of the bottom pad at the beginning to be equal to the height of the underline image, then adjust it to the appropriate position (the CSS below Sets the bottom of the hyperlink to 4 pixels ):

A {padding-bottom: 4px ;}