Design with CSS to show the bottom line when the mouse moves over the hyperlink

 Maybe you often visit some websites, and the hyperlinks in the article content have no bottom line, but when you move the mouse over the hyperlink , the bottom line appears, and then when you move the mouse away, the bottom line disappears again , such as the mouse moves through hyperlinks only show a link to the bottom line of design techniques can be used CSS 's text-decoration text effects and CSS movement determination process with such skills is quite a common design approach, we first introduce the following The basic syntax of text-decoration , and then the entire CSS syntax as an example.

CSS text-decoration basic syntax

text-decoration: text effect parameters;

In order to create the effect of displaying the bottom line when the mouse moves through the hyperlink , the text effect parameters we will use are none and underline. Among them, none means not to display the bottom line, and underline means to display the bottom line. For detailed parameter usage, please refer to: CSS text-decoration will have a complete introduction.

Example of showing the bottom line when the mouse is over the hyperlink

<style style="text/css">
a{text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<a href="http://www.wibibi.com"> Wibibi Web Design Teaching Encyclopedia</a>

The above example presents the result as

Wibibi Web Design Teaching Encyclopedia

The syntax between the <style> and </style> tags in the example is CSS syntax. There are two parts. The first line "a{text-decoration:none;}" sets the normal state of the hyperlink , which is The style displayed when the mouse has not moved to the hyperlink , where text-decoration:none means that the bottom line is not displayed, and the use of "a:hover{...}" in the second line means when the mouse moves over the hyperlink the presentation style, "text-decoration: underline" within the braces representatives to show the bottom line, with the provisions of the two-line syntax, in the web page hyperlinks can not be displayed in the bottom line usually, when users move the mouse up , The bottom line naturally appears, and the writing method of the example can manage the bottom line presentation status of all hyperlinks in the entire web page .