Hide hyperlink bottom line

 Web page hyperlinks have a bottom line by default in most browsers. The purpose is to clearly indicate the difference between the link and the general text. As the style of the web page evolves, this way of presentation has long been unable to meet all web pages. design style, some designers will preset the bottom line hidden herein, this will be through CSS 's text-decoration is not the bottom line of design hyperlinks , divided into two approaches, a single hide a web page hyperlinks bottom line and time management The bottom line of the hyperlinks of the entire webpage , all major browsers support these two CSS tricks.

Example 1: Hide the bottom line of a single hyperlink

<a href="#" style="text-decoration:none;">Hidden hyperlink bottom line example</a>

The output of the above example

Example of hiding hyperlink bottom line

An example of a relatively simple approach, once belonging to approach a link, although this method is relatively time-consuming, but it is displayed browser preferences, such as the entire web page hyperlinks through CSS must show the bottom line syntax provides designers It is still possible to hide the bottom line of one of them separately through this method. The disadvantage is that the bottom line of the mouse cannot be displayed automatically. If you have such a requirement, you can refer to this article: Use CSS to design when the mouse moves over a hyperlink Show bottom line .

Example 2: Hide the bottom line of the hyperlink of the entire webpage

<style>
a {
    text-decoration:none;
}
</style>
<a href="#">Hidden hyperlink bottom line example</a>

The output of the above example

Example of hiding hyperlink bottom line

The second example is a design technique for overall management. In the <style> tag, it is stipulated that all the bottom lines of the a attribute should be hidden. You can directly manage the hyperlink bottom lines of the entire web page. The hidden syntax is "text-decoration:none" In this part, the parameter value none means that the bottom line is not displayed. The text-decoration also has other types of meals, which are used to design effects such as on-line and strike-through. If you are interested, please refer to this article: CSS text-decoration will have a complete introduction .