Use CSS to customize page underline styles

css| Web page

CSS for web designers to provide a rich and flexible form of page elements of the control method. However, you might notice that for underscores, CSS offers an optional operation that is not much. Under normal circumstances, people see the underline is basically horizontal line, lack of vitality and smart. However, the road is not dead, through some wonderful transformation, we can still make a creative underline so that the page more beautiful.

This is a custom underline example: a custom underline. Isn't it cool? In addition to allowing your Web page to exhibit a distinctive style, it can be a reminder or focus on different types of text in your document.

Let's get together and learn how to customize a different underline.

First, we have to prepare a picture as an underscore. You can use it first, or you can draw it yourself. Note that the images you prepare should be suitable for horizontal repetitions, preferably in a transparent GIF format that ensures that the background is not obscured.

In addition, if you are preparing an underline picture that occupies more pixels in height (thickness), you should increase the line spacing (line-height) space between the text and the downlink text, so you can set:

p { line-height: 1.5; }

The next thing to do is to remove the default underline so that we can apply the custom underline to the specified text, using the following CSS settings (it means that the hyperlink text is not decorated):

a { text-decoration: none; }

OK, now you can create a custom underline, and here we use the prepared picture as a background picture of the hyperlink element, as follows:

a { background-image: url(underline.gif); }

Of course, the length of the text may not be equal to the length of the original image, this needs to consider the problem of duplication of pictures, that is, the repetition should be limited to the horizontal direction of the x axis, you can set the following:

a { background-repeat: repeat-x; }

There is also a need to consider the question, that is, how to change the size of the word? To make the underlined picture always appear below the hyperlink text, regardless of the size of the text, we should use the background position (Background-position) attribute in the CSS to locate the picture at the bottom of the hyperlink element plain. For underline pictures such as arrows, you also need to consider the text edge of the hyperlink and the edge of the picture. The following example limits the position of the underlined background picture to the lower-right corner:

a { background-position: 100% 100%; }

How do you control the white space between the custom underline picture and the text? This can be done by adding padding (padding). The size of the underlined picture since the exact position of the Hyperlink text Baseline (baseline) and the word used. It is recommended that you start by setting the size of the bottom padding (bottom-padding) equal to the height of the underline picture, and then slowly adjust to the appropriate position (the bottom of this CSS setting hyperlink is filled with 4 pixels):

a { padding-bottom: 4px; }

Because the underlined picture is positioned at the bottom of the hyperlink element, you need to make sure that the hyperlink text you are using does not cross the line, otherwise only the hyperlink text in the bottom will have a custom underline. How to solve it is to prevent the hyperlink text from crossing the line, which can be done through the White-space property of the CSS:

a { white-space: nowrap; }

OK, the above mentioned hyperlink markup CSS settings merged, the result is as follows:

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

Remember that some hyperlink text is not underlined, but when the mouse moves over it, underline the situation that emerges? A custom underline can also do this by setting the hyperlink background on the hover, rather than on the hyperlink mark A, as follows:

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

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

How is it, is it very simple? Take a look at some examples and their corresponding CSS settings:

Static underline

#EXAMPLE3A {
Text-decoration:none;
Background:url (' diagonal.gif ') repeat-x 100% 100%;
White-space:nowrap;
padding-bottom:2px
}

Floating Effect Underline

#EXAMPLE3B {
Text-decoration:none;
White-space:nowrap;
padding-bottom:2px;
}

#example3b:hover {
Background:url (' diagonal.gif ') repeat-x 100% 100%;
}

Static underline

#EXAMPLE4A {
Text-decoration:none;
Background:url (' flower.gif ') repeat-x 100% 100%;
White-space:nowrap;
padding-bottom:10px
}

Floating Flower effect underline

#EXAMPLE4B {
Text-decoration:none;
White-space:nowrap;
padding-bottom:10px;
}

example4b:hover {
Background:url (' flower.gif ') repeat-x 100% 100%;
}

Static Arrow underline

#EXAMPLE1A {
Text-decoration:none;
Background:url (' arrow.gif ') repeat-x 100% 100%;
White-space:nowrap;
padding-bottom:5px
}

Floating Animation arrow underline (here the arrow will appear scrolling, but the effect of this scrolling picture is only in some browsers)

#example2b {
Text-decoration:none;
White-space:nowrap;
padding-bottom:5px;
}

#example2b:hover {
Background:url (' animarrow.gif ') repeat-x 100% 100%;
}