CSS: Customize colorful web link underlines_CSS/HTML

CSS itself does not directly provide the function of changing the underline of HTML links, but as long as we use some techniques, we can still make the monotonous underline of web links become colorful.

1. Basic principles

First of all, the first step to customize the underline of HTML links is to create a graphic. Repeat this graphic in the horizontal direction to form an underline effect. If you want to show the background of the web page behind the underline, you can use a transparent .gif graphic.

Secondly, if the height of the underline graphic is large, the height of the text must be increased appropriately so that there is a larger space between the bottom of one line of text and the top of the next line of text, such as p { line-height: 1.5; } .

Example of custom link underlining

Third, in order to display a custom underline, the default underline must be hidden, that is, a { text-decoration: none; }.

Fourth, set the underline graphic for the link element and construct a custom underline. Assuming that the underline graphic is underline.gif, the CSS code for setting the underline graphic is a { background-image: url(underline.gif); }.

Fifth, we need to make the underline graphic appear repeatedly in the horizontal direction, but not in the vertical direction, otherwise it will be hidden behind the text. The code that requires the underline to repeat only in the horizontal direction is: a { background-repeat: repeat-x; }.

Sixth, to ensure that the graphic appears below the link text (regardless of the font size), use the background-position attribute to place the graphic at the bottom of the link element. For underline graphics such as arrows, you may also want to consider the horizontal alignment of the graphics. Suppose you want to place the underline graphic in the lower right corner, the CSS code is: a { background-position: 100% 100%; }.

Seventh, in order to leave space for custom graphics below the link text, appropriate white space must be added. The specific position of the underline graphic relative to the link text is related to the size of the text, but generally speaking, you can first make the bottom margin equal to the height of the underline graphic, and then adjust it if necessary. For example: a { padding-bottom: 4px; }.

Eighth, since the underline graphic is placed at the bottom of the link element, it must be ensured that the link does not break (if the link is allowed to span multiple lines, only the link text in the following line will have a custom underline). Use the white-space attribute of CSS to prevent link text from wrapping, that is, a { white-space: nowrap; }.

In summary, a complete example of defining CSS style attributes for link elements is as follows:

　a {
​​ text-decoration: none;
​​ background: url(underline.gif) repeat-x 100% 100%;
​​ padding-bottom: 4px;
​​ white-space: nowrap;
​ }

If you want the custom underline to appear only when the mouse is hovering, just change the CSS background attribute originally set directly on the link element to:hover, for example:

　a {
​​ text-decoration: none;
​​ padding-bottom: 4px;
​​ white-space: nowrap;
​ }

a:hover {
​​ background: url(underline.gif) repeat-x 100% 100%;
​ }

2. Appreciation of examples

Suppose there are two underline graphics diagonal.gif (ripple line) and flower.gif (flower). The height and width of the former are 3 and 9, and the height and width of the latter are 11 and 15. Here is a complete example of setting two types of underline:

Example of custom link underline

The source code of the web page is as follows:
​ Note: diagonal.gif and flower.gif have been copied to the same directory where the web page is located.

　
​

​

　

　a#example1a {
​ text-decoration: none;
​ background: url(diagonal.gif) repeat-x 100% 100%;
​ white-space: nowrap;
​ padding-bottom: 2px;
​ }

　a#example1b {
​ text-decoration: none;
​ white-space: nowrap;
​ padding-bottom: 2px;
​ }

　a#example1b:hover {
​ background: url(diagonal.gif) repeat-x 100% 100%;
​ }

　a#example2a {
​ text-decoration: none;
​ background: url(flower.gif) repeat-x 100% 100%;
​ white-space: nowrap;
​ padding-bottom: 10px;
​ }

　a#example2b {
​ text-decoration: none;
​ white-space: nowrap;
​ padding-bottom: 10px;
​ }

　a#example2b:hover {
​ background: url(flower.gif) repeat-x 100% 100%;
​ }

-->
​
​

　

　

Example:

​

ripple static underline,
​ The ripple line that appears when the mouse is over.

​

flower static underline,
​ Flower underline that appears when the mouse is over.

　
​