Decorative underline CSS elements

The technology of style sheets performs two functions when creating HTML pages. Firstly, with its help, the position of the individual elements of the site is formed. Secondly, it makes the blocks visually attractive to the user. The second function is implemented in different ways. One of them is underlining. CSS provides for this attribute text- decoration .

Specification of the attribute record

The use of the property of text- decoration is simple. It is enough to write the following line for the element in the code of the style file:

Text- decoration: attribute_value ;

Instead of the attribute_value , the CSS specification offers a number of options:

• Underline - the line is located strictly under the text;
• Overline - the line passes from the top of the text;
• None - removing all decorative effects;
• Inherit - adopts the value of the parent element.

Above, not all possible forms of the record are given, since this attribute specifies not only CSS underlining, but also other effects, for example, "blinking" the text or its interlacing.

Examples of hyperlink design

Beginners in web design and programming have the question: why make the bottom line of the text? At the dawn of the Internet technology era, this way of highlighting indicated to the user that there is a hyperlink in front of him - a text that will be clicked to a new page.

By default, hyperlinks have an underline property. In practice, the problem arises to remove the line from inactive elements and make it visible when the user hovers the mouse pointer. Here is an example of code that disables CSS underlining:

A {text-decoration: none;}

The following entry is used for active links:

A: hover {text-decoration: underline;}

Decorative underline for advanced

The standard text- decoration attribute has several limitations:

• The color of the line does not differ from the color of the text of the link, it is impossible to distinguish their "coloring";
• Only a solid line is used as an underscore. CSS does not imply the use of other styles of outline.

But special techniques help to bypass the classical design of the text. In the first case, an additional < span > tag is used to specify the hyperlink.

For example: