Using CSS, link underlines can also be used to customize _ CSS/HTML

With CSS, the link underline can also be used to customize the original article link: CSS Design: Custom Underlines

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

Note: The "[Supplement]" content in the article is added by the translator (from the CSS 2.0 Chinese manual) to facilitate readers to understand the relevant content.

Although Web Designers usually have a lot of ways to control how documents are presented, the basic CSS cannot provide many choices for the underline style below the link on the page. However, with only a few tips, you can get the creative control of The Link style display mode.

Custom underlines give some suitable websites new creation opportunities. Custom underscores can also be used to provide additional visual clues for different links on the same page.

Start

You should start by creating a graph with your underline. This image will repeat at the level. If you want to see that the webpage background can be completely displayed, you can create a transparent. GIF file.

If your underline image is several pixels high, you should increase the line-height of the text to increase the space between the bottom of the last line and the top of the next line.

P {line-height: 1.5 ;}

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

[Supplement]

Syntax:

Line-height: normal | length

Valid value:

Normal: default value. Default Row Height
Length: percent number | length value composed of floating point numbers and unit identifiers, which can be negative values. The percentage value is based on the font height. See length unit

Note:

Retrieves or sets the Row Height of an object. That is, the distance between the bottom of the font and the top of the font.
The row height is the distance between the bottom of the font and the top of the internal height of the font. The row height with negative values can be used to achieve the shadow effect.
If a formatted row contains more than one object, the maximum row height will be applied. In this case, this attribute cannot be negative.
This attribute is read-only for currentStyle objects. Other objects can be read and written.
The corresponding script feature is lineHeight.

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

Before creating a custom underline for a link, we need to remove the existing underline:

A {text-decoration: none ;}

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

[Supplement]

Syntax:

Text-decoration: none | underline | blink | overline | line-through

Valid value:

None: default value. No Decoration
Blink: flashing
Underline: underline
Line-through
Overline: dashes

Note:

Retrieves or sets the decoration of text in an object.
The default value of a, u, and ins objects with href is underline.
The strike, s, and del objects. The default value is line-through.
If the value of none is at the end of the attribute Declaration, all other values earlier will be cleared. For example, declaring text-decoration: underline overline blink none is equal to declaring text-decoration: none.
If the object does not contain text (such as an img element) or empty elements (such:.
If you set this attribute value of the body object to none, object a will still maintain its original underline style. Unless you declare this property value for object.
This attribute of the specified block object affects all its inline sub-objects. Once this impact occurs, the block object container will eventually be affected.
The available values in IE4 + are overline and blink. Although the blink value is provided, it does not work.
This attribute is read-only for currentStyle objects. Other objects can be read and written.
The script feature is textDecoration.

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

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

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

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

[Supplement]

Syntax:

Background-image: none | url)

Valid value:

None: default value. No background image
Url: Specifies the background image using an absolute or relative url.

Note:

Sets or retrieves the background image of an object.
When both the background image and background color are set, the background image will overwrite the background color.
This attribute is read-only for currentStyle objects. Other objects can be read and written.
The corresponding script feature is backgroundImage.

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

We want this image to be repeated at the bottom of the text in the horizontal direction rather than the vertical direction, otherwise it will be displayed behind the link text itself. We restrict duplicate background images along the X axis:

A {background-repeat: repeat-x ;}

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

[Supplement]

Syntax:

Background-repeat: repeat | no-repeat | repeat-x | repeat-y

Valid value:

Repeat: default value. The background image is tiled vertically and horizontally.
No-repeat: the background image is not tiled.
Repeat-x: the background image is tiled only horizontally.
Repeat-y: the background image is tiled only vertically.

Note:

Sets or retrieves the background image of an object and how to arrange it. You must first specify the background image of the object ).
This attribute is read-only for currentStyle objects. Other objects can be read and written.
The corresponding script feature is backgroundRepeat.

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

Regardless of the font size, to ensure that all images appear under the link text, we will use the background-position attribute to locate the image to the bottom of the link element. You may have a preference for certain background images, such as arrows, on which side of the image alignment element. In this example, we place the background on the right of the bottom:

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

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

[Supplement]

Syntax:

Background-position: length | length
Background-position: position | position

Valid value:

Length: percent | length value composed of floating-point numbers and unit identifiers. See length unit
Position: top | center | bottom | left | center | right

Note:

Sets or retrieves the background image position of an object. The background-image attribute must be specified first.
This attribute positioning is not affected by the object's patch attribute (padding) settings.
The default value is 0% 0%. In this case, the background image is located in the upper left corner of the content area of the object that does not include the patch.
If only one value is specified, the value is used for abscissa. The default ordinate value is 50%. If two values are specified, the second value is used for ordinate.
If the value is set to right center, right will overwrite the center value as the abscissa value, so the background image will be located on the right.
The corresponding script feature is backgroundPosition.

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

To create a space for a custom underline image of the link text body, we will add some padding ). Depending on the font size, the exact position of the underline image will change relative to the baseline of the link text. We recommend that you adjust the height of the bottom-padding image to suit your needs:

A {padding-bottom: 4px ;}

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

[Supplement]

Syntax:

Padding-bottom: length

Valid value:

Length: length Value composed of floating-point numbers and unit identifiers | or percent. The percentage is based on the width of the parent object. Negative values are not allowed.

Note:

Search for or set the patch at the bottom of the object. For td and th objects, the default value is 1. The default value of other objects is 0.
In IE5.5 +, this attribute supports inline objects. In earlier versions, to use this attribute for inline elements, you must first set the height or width attribute of the object, set the position attribute to absolute, or set the display attribute to block.
This attribute is read-only for currentStyle objects. Other objects can be read and written.
The corresponding script feature is paddingBottom.

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

Because the underline graph is located at the bottom of the link element, we need to ensure that the link cannot span multiple rows (if they are allowed to span multiple rows, only the lowest line of link text is displayed with a custom underline ). We will use the white-space attribute of CSS to Disable link text wrapping.

A {white-space: nowrap ;}

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

[Supplement]

Syntax:

White-space: normal | pre | nowrap

Valid value:

Normal: default value. The default processing method. Text automatically processes line breaks. If the container boundary content arrives, it will go to the next line.
Pre: line breaks and other blank characters are protected. This value must be IE6 + or! DOCTYPE is declared as standards-compliant mode. If! The DOCTYPE declaration is not specified as standards-compliant mode. This attribute can be used but does not work. The result is equivalent to normal. See pre object
Nowrap: forces all text to be displayed in the same row until the text ends or the br object is encountered. See noWrap attributes

Note:

Sets or retrieves the processing method of space characters in an object.
Space characters, such as line breaks, spaces, and tabs, are ignored by default in HTML documents. When this attribute is set to normal or nowrap, you can add spaces by using a named entity that does not wrap spaces, and use the br element to add line breaks.
This attribute has the same impact on the content you operate on using the Document Object Model (DOM) as on the content displayed on IE.
This attribute acts on block objects.
This attribute is read-only for currentStyle objects. Other objects can be read and written.
The corresponding script feature is whiteSpace.

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

All CSS attributes of the link element can be merged:

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

If you want to customize the effect of underline only when the mouse slides over the link, you only need to set the CSS background attribute to the hover pseudo class to replace the style directly set on the Link element.

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

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

Example