Use CSS, link underline also play custom _css/html

Original link: CSS design:custom underlines

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

Note: the "[Supplemental]" content of the article is added by the translator (from the CSS 2.0 Chinese Manual), in order to facilitate the reader to understand the relevant content.

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

Custom underline gives some suitable sites with new authoring opportunities. Custom underscores can also be used to provide additional visual cues for different links that are included in the same page.

Begin

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

If your underline graphic is a few pixels high, 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;}

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

[Add]

Grammar:

Line-height:normal | Length

Take value:

Normal:  default value. Default row height
Length:  percent number | The length value, consisting of floating-point numbers and unit identifiers, 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. 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 a shadow effect.
If a formatted row includes more than one object, the maximum row height is applied. In this case, this property cannot be negative.
This property is read-only for Currentstyle objects. is writable for other objects.
The corresponding script attribute is lineheight.

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

Before you can create a custom underline for a link, we need to remove an existing underline:

a {text-decoration:none;}

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

Added

Grammar:

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

Take value:

None:  default value. No decoration
Blink:  Flashing
Underline:  Underline
Line-through:  through Line
Overline:  Underline

Description

Retrieves or sets the decoration of text in an object.
A with the href attribute, and U, the INS object defaults to underline.
Object strike, S, del, default value is Line-through.
If the none value is at the end of the property declaration, all previous other values will be cleared. For example, declaring Text-decoration:underline overline blink none equals declaration 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 to none for the body object, a object will still retain its original underline style. Unless you declare this property value against object A.
Specifying this property of a block object affects all of its inline child objects. Once this impact 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. is writable for other objects.
The corresponding script attribute is textdecoration.

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

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

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

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

Added

Grammar:

Background-image:none | URL (URL)

Take value:

None:  default value. No background image
URL (URL):  Specifies a background image using 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 covered above the background color.
This property is read-only for Currentstyle objects. is writable for other objects.
The corresponding script attribute is backgroundimage.

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

We want this image to repeat horizontally along the bottom of the text rather than vertically, 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

Take value:

Repeat:  default value. The background image is tiled vertically and horizontally
No-repeat:  background image uneven
Repeat-x:  background image is tiled horizontally only
Repeat-y:  background Image tile only in portrait

Description

Sets or retrieves whether and how the background image of an object is arranged. The background image (Background-image) of the object must be specified first.
This property is read-only for Currentstyle objects. is 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 locate the image to the bottom of the link element. You might have a preference for some background graphics, such as arrows, on which side of the image's alignment element. For our example, we put the background to the right of the bottom:

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

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

Added

Grammar:

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

Take value:

Length:  Percentage | 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 an object. The Background-image attribute must be specified first.
This property positioning is not affected by the Patch property (padding) setting of the object.
The default value is: 0% 0%. The background picture is positioned at the top-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 ordinate.
If you set the value to right center, the background image will be positioned on the right-hand side because it overrides the center value as the horizontal axis value.
The corresponding script attribute is backgroundposition.

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

To create a space for a custom underline graphic for the text of the link, we will add some padding (padding). Depending on the size of the font 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 the bottom-padding, with the underlined graphic height, adjusted to suit your needs:

a {padding-bottom:4px;}

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

Added

Grammar:

Padding-bottom:length

Take value:

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

Description

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

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

Because the underline shape is positioned at the bottom of the link element, we need to ensure that the link does not span multiple lines (if they are allowed to span multiple lines, then only the lowest line of link text displays the custom underline). We will use the CSS White-space property to prevent link text from wrapping.

a {white-space:nowrap;}

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

Added

Grammar:

White-space:normal | Pre | NoWrap

Take value:

Normal:  default value. The default processing method. Text is automatically processed for line wrapping. If you reach the container boundary, the content will go to the next line
Pre:  and other whitespace characters will be protected. This value needs ie6+ or! DOCTYPE declared as Standards-compliant mode support. If! DOCTYPE declaration is not specified as Standards-compliant mode, this property is available, but does not work. The result is equivalent to normal. See Pre Object
NoWrap:  forces all text to be displayed within the same line until the text ends or the BR object is encountered. See NoWrap Properties

Description

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

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

All CSS properties for a linked element can be merged 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 over the link appears, just set the CSS Background property is: hover pseudo class, instead of directly set on the link elements on the style.

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

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

Example