Customize colorful web page Link underscores

CSS itself does not directly provide the function of transforming HTML link underscores, but we can still enrich the monotonous Web Page Link underscores as long as some skills are used.

I. Basic Principles

First, the first step to customize the HTML link underline is to create a graph. Repeat the graph in the horizontal direction to form the underline effect. If you want to display the background image of the web page behind the canvas, you can use a transparent. GIF image.

Second, if the height of an underline image is large, you must increase the height of the text so that there is a large space between the bottom of a line of text and the top of the next line of text, for example, P {Line-Height: 1.5 ;}.

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

Fourth, set an underline for the link element to create a custom underline. If the underline image is underline.gif, set the CSS code of the underline image to a {background-image: url(underline.gif );}.

Fifth, we need to repeat the underline image in the horizontal direction, but we cannot repeat it in the vertical direction. Otherwise, it will be hidden behind the text. The code that requires the underline to appear only in the horizontal direction is: A {background-repeat: Repeat-X ;}.

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

7. In order to leave space for the custom image below the link text, you must add appropriate spaces. The specific position of the underline image relative to the link text is related to the text size, but in general, you can first make the bottom blank equal to the height of the underline image, and adjust it if necessary. Example: A {padding-bottom: 4px ;}.

Eighth, because the underline graph is placed at the bottom of the link element, you must ensure that the link is not broken (for example, if the link is allowed to span multiple rows, 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 being broken, that is, a {white-space: nowrap ;}.

To sum up, 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 to make the custom underline appear only when the mouse stays, you only need to change the CSS background attribute directly set 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%;
}