CSS: Customize the colorful page links underline _css/html

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

First, the basic principle

First, the first step in customizing the HTML link underline is to create a graphic that is underlined in a horizontal direction by repeatedly placing the graphic. 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 is a large height, you must increase the height of the text appropriately so that there is greater space between the bottom of a 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 display a custom underline, you must hide the default underline, that is, a {text-decoration:none;}.

Four, set the underline shape for the link element, and construct the underline that is derived from the definition. If the underline graphic is underline.gif, the CSS code for the underline graphic is a {background-image:url (underline.gif);

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

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

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

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

To sum up, complete examples of defining CSS style attributes for link elements are 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 you hover over the mouse, simply change the CSS background property that was 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%;
}

Second, the example appreciation

Suppose there are two underline graphics diagonal.gif (corrugated lines), flower.gif (Flowers) The former is high, wide is 3, 9, the latter is 11, 15. The following is a complete example of setting two underscores:

Custom Link Underline example

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

<title>ex</title>

<style type= "Text/css" >

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%;
}

-->
</style>

<body>

<p> Example:</p>
<p> <a href= "#" id= "example1a" > Corrugated line static underline </a>,
<a href= "#" id= "example1b" > The ripple line that appears when the mouse hovers </a>. </p>
<p> <a href= "#" id= "EXAMPLE2A" > Flowers static underline </a>,
<a href= "#" id= "example2b" > The flowers that appear when the mouse stops are underlined </a>. </p>

</body>