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 ;}.
Example of custom link underline
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. Set the css of the underline image if the line chart is underline.gif.CodeIs 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%;
}
Ii. instance Appreciation
Assume that there are two line chart diagonal.gif( flofloflower.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. The following is a complete example of setting two kinds of underscores:
Example of custom link underline
WebpageSource codeAs follows:
Note: diagonal.gif and flower.gif have been first copied to the same directory where the webpage is located.
<HTML>
<Head>
<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>
</Head>
<Body>
<P> instance: </P>
<P> <a href = "#" id = "example1a"> static underline </a>,
<A href = "#" id = "example1b"> the broken line that appears when you move your mouse over </a>. </P>
<P> <a href = "#" id = "example2a"> static flower underline </a>,
<A href = "#" id = "example2b"> the flower underline that appears when the mouse stays </a>. </P>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
