Use CSS, link underline also play custom _css/html

Original link: CSS design:custom underlines

Translated by A List Apart magazine and author. (Translated with the permission of A List Apart Magazine and the author[s].)

Description: The article "[Supplemental]" content is added by the translator (from the CSS 2.0 Chinese manual), the purpose is to facilitate the reader to understand the relevant content.

Although web designers often have a number of ways to control how documents are rendered, basic CSS does not provide many options for the underline style below the link in the page. But with a little bit of skill, you can get creative control of how the link style is displayed.

Customize the underline to some of the appropriate sites with new authoring opportunities. Custom underscores can also be used to provide additional visual cues for different links contained in the same page.

Begin

You should start by creating a graphic for your underline. The graph will be duplicated horizontally, and if you want the background to be fully visible, you need to create a transparent. gif file.

If your underline graphic has a few pixels high, then you should increase the line-height (line spacing) of the text to increase the space between the bottom of the row and the top of the next line.

p {line-height:1.5;}

-------------------------------------------------

[Supplemental]

Grammar:

Line-height:normal | Length

Value:

Normal: Default value. Default row height
Length: Percent number | A length value consisting of a floating-point number and a unit identifier that is allowed to be negative. The percentage value is based on the height size of the font. See Length Units

Description

Retrieves or sets the row height of the object. That is, the distance between the bottom of the font and the top of the font.
Row height is the distance between the font drop and the top of the inner height of the font. A negative row height can be used to achieve the shadow effect.
If a formatted row includes more than one object, the maximum row height is applied. In this case, this property cannot be a negative value.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is lineheight.

-------------------------------------------------

Before you can create a custom underline for a link, we need to remove the underscore that already exists:

a {text-decoration:none;}

-------------------------------------------------

Added

Grammar:

Text-decoration:none | | Underline | | Blink | | overline | | Line-through

Value:

None: Default value. No decoration
Blink: Flashing
Underline: Underline
Line-through: Through Line
Overline: Underline

Description

Retrieves or sets the decoration of the text in an object.
A with href attribute, and U, the INS object default value is underline.
Object strike, S, Del, the default value is Line-through.
If the value of none is at the end of the attribute declaration, all previous other values will be cleared. For example, declaring Text-decoration:underline overline blink none equals declaring Text-decoration:none.
This property does not work if the object has no text (such as an imgelement) or an empty element (such as:).
If you set this property value to none for the body object, the A object will still maintain its original underline style. Unless you declare this property value for the A object.
Specifying this property of a block object affects all of its inline child objects. Once this effect occurs, the Block object container will eventually be affected.
The values available in ie4+ are Overline and blink. Although the blink value is provided, it will not be useful.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is textdecoration.

-------------------------------------------------

To create a custom underscore, we set the background image for the link element:

A {Background-image:url (underline.gif);}

-------------------------------------------------

Added

Grammar:

Background-image:none | URL (URL)

Value:

None: Default value. No background map
URL (URL): Specify a background image with an absolute or relative URL address

Description

Sets or retrieves the background image of an object.
When the background image and background color (Background-color) are set, the background picture will be overlaid on the background color.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is backgroundimage.

-------------------------------------------------

We want this image to repeat horizontally, not vertically, at the bottom of the text, otherwise it will appear behind the link text itself. We limit the background image to repeat along the X axis:

a {background-repeat:repeat-x;}

-------------------------------------------------

Added

Grammar:

Background-repeat:repeat | No-repeat | Repeat-x | Repeat-y

Value:

Repeat: Default value. Background images are tiled vertically and horizontally
No-repeat: Uneven background image
Repeat-x: Background image is tiled horizontally only
Repeat-y: Background image is only tiled vertically

Description

Sets or retrieves whether and how the background image of an object is layout. You must first specify the object's background image (Background-image).
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is backgroundrepeat.

-------------------------------------------------

Regardless of the size of the font, to ensure that our images appear below the link text, we will use the background-position (background positioning) property to position the image to the bottom of the linked element. For some background graphics, such as arrows, on which side of the image alignment element you may have your own preference. For our example, we place the background on the right side of the bottom:

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

-------------------------------------------------

Added

Grammar:

Background-position:length | | Length
background-position:position | | Position

Value:

Length: Percent | The length value consisting of floating-point numbers and unit identifiers. See Length Units
Position:top | Center | Bottom | Left | Center | Right

Description

Sets or retrieves the background image position of the object. You must first specify the Background-image property.
This property location is not affected by the object's patch properties (padding) setting.
The default value is: 0% 0%. The background picture is positioned in the upper-left corner of the content area where the object does not include patches (padding).
If only one value is specified, the value is used for the horizontal axis. The ordinate will default to 50%. If two values are specified, the second value is used for the ordinate.
If you set the value to right center, the background image will be positioned on the left side because the center value will be overwritten with the axis value.
The corresponding script attribute is backgroundposition.

-------------------------------------------------

In order to create space for the custom underline graphic of the text body of the link, we will add some padding (padding). Depending on the size of the font being used, the exact position of the underlined graphic will change relative to the baseline of the linked text. It is recommended that you start with bottom-padding, with the underlined graphic height, adjusted to suit your needs:

a {padding-bottom:4px;}

-------------------------------------------------

Added

Grammar:

Padding-bottom:length

Value:

Length: A value consisting of floating-point numbers and unit identifiers | or percentages. Percentages are based on the width of the parent object. Negative values are not allowed.

Description

Retrieves or sets the inner patch of the bottom edge of the object. The default value is 1 for TD and TH objects. The default value for other objects is 0.
This property supports inline object use in ie5.5+. In previous versions, for inline features to use this property, you must first set the height or width property of the object, or set the Position property to absolute, or set the display property to block.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is paddingbottom.

-------------------------------------------------

Because the underline graphic is positioned at the bottom of the link element, we need to ensure that the links cannot span multiple lines (if they are allowed to span multiple lines, only the lowest line of link text shows a custom underline). We will use the CSS's White-space property to suppress the wrapping of the linked text.

a {white-space:nowrap;}

-------------------------------------------------

Added

Grammar:

White-space:normal | Pre | NoWrap

Value:

Normal: Default value. The default processing mode. Text automatically handles line breaks. If you arrive at the container boundary, the content will go to the next line
Pre: line breaks and other whitespace characters will be protected. This value requires ie6+ or! DOCTYPE statement for Standards-compliant mode support. If! The DOCTYPE declaration is not specified as Standards-compliant mode, and this property can be used but does not work. The result is equal to normal. See Pre objects
NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object. See NoWrap Properties

Description

Sets or retrieves how white space characters are handled within an object.
Whitespace characters, like line breaks, spaces, TAB, are ignored by default in HTML documents. When this property is set to Normal or nowrap, you can use a named entity that does not wrap spaces to add spaces and add line breaks with a BR element.
The effect of this property on the content of your use of the Document Object Model (DOM) operation is the same as its effect on the content of IE display.
This property acts on the Block object.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is whitespace.

-------------------------------------------------

All CSS properties of a linked element can be combined into:

A
Text-decoration:none;
Background:url (underline.gif) repeat-x 100% 100%;
padding-bottom:4px;
White-space:nowrap;
}

If you want to customize the underline effect only when the mouse is over the link, just set the CSS background property to: hover pseudo-class, instead of directly set on the link element on the style.

A
Text-decoration:none;
padding-bottom:4px;
White-space:nowrap;
}

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

Example

