CSS: Customize the colorful web links underline _css/html

CSS itself does not directly provide the ability to transform the HTML link underline, but as long as the use of some tricks, we can still let the monotonous web links underline colorful.

First, the basic principle

First, the first step in customizing the HTML link underline is to create a graphic that repeats the shape horizontally, creating an underscore effect. If you want to display the background of the page behind the underline, you can use a transparent. gif graphic.

Second, if the underlined graphic has a large height, you must increase the height of the text appropriately so that there is more space between the bottom of the line of text and the top of the next line of text, such as p {line-height:1.5;}.

Example of a custom link underline

Third, to show the out-of-definition underscore, you must hide the default underscore, a {text-decoration:none;}.

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

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

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

VII, in order to make room for a custom graphic below the link text, you must add the appropriate blanks. The underline graphic is relative to the size of the text, but in general, you can make the bottom margin equal to the height of the underlined graphic and adjust it if necessary. For example: a {padding-bottom:4px;}.

In the end, because the underline graphic is placed at the bottom of the link element, you must ensure that the link is not wrapped (such as allowing the link to span multiple rows, only the following line will have a custom underscore below the link text). The White-space property of CSS prevents the link text from wrapping, i.e. a {white-space:nowrap;}.

In summary, a complete example of CSS style attributes is defined for a LINK element such as:

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 resting, simply change the CSS background property that was 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%;
}

Ii. Appreciation of examples

Suppose there are two underline graphics diagonal.gif (wavy lines), flower.gif (Flowers), the former height, width is 3, 9, the latter of the height, width is 11, 15. Here is a complete example of setting two underscores:

Example of custom link underline

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

　　
　　
　　 Ex

　　
　　

　　

　　

Instance:

　　

Ripple line Static underline,
The ripple line that appears when the mouse pauses.

　　

Flowers static underline,
The flower underline that appears when the mouse pauses.

　　
　　

