Historically, when processing a web document, browsers emphasize and highlight hyperlinks in a special color. This can seriously disrupt the design idea and spoil the appearance of the site. The webmaster can apply special CSS instructions and remove the underline of the link to fit it nicely into the page.
Why are links underlined?
Since the inception of the World Wide Web, hyperlinks have been of particular importance. They perform the most important function of combining millions of different web documents into one network.
The special status of the element determined the need for its selection on the page in any way. To prevent the link from merging with the rest of the text (which was originally just black), it was decided to underline it and colorize it in blue. In addition, mouse-over effects were added (the disappearance of underlining, cursor change) and the color change of already visited links.
This is how the first websites looked like:
Hyperlinks immediately stand out from the surrounding text.
This behavior of elements was fixed, and browsers began to use it by default.
Highlighting Links
With the development of CSS, there are many opportunities to make the link element visible without resorting to underlining. Moreover, in some cases, this thin line became undesirable, as it did not fit into the design of the web page.
Layout designers needed the ability to use CSS to remove the underline of links, for example, in the main menu of the site and sidebars.
Thus, the main idea was preserved, stating that the hyperlink should be noticeable, but the default implementation method did not always meet the needs.
Change hyperlink style
Removing the underline of a CSS link is very simple. There is a special instruction text-decoration
. She manages the design of a piece of text using a horizontal line and determines its specific location.
The list of values this property can take:
underline
- underline;overline
- top underline, the line passes over the text;line-through
- strikethrough, the line runs in the middle of the line;none
- lack of design.
By default, browsers apply the text-decoration: underline
instruction to hyperlinks. Obviously, we are interested in the value none
. It allows you to reset the previously applied styles, as well as reset the default design.
To remove the underline of a CSS link, apply the following rule to it:
a { text-decoration: none; }
Browser support
The text-decoration property and its value none are perfectly supported by all existing browsers, including their old versions, so you can remove the underline of links to CSS without any special difficulties.