How does the underline CSS appear when the mouse passes through the field? (Navigation bar code example)

The design of the navigation bar style on the Web page is especially important, so what are the styles that make it so bright? Then this article will give you a description of the mouse when navigating through the underline effect.

The specific code examples for the CSS mouse to be implemented with the underline effect are as follows:

<div class= "Htmleaf-container" > 
The 
 Style.css code is as follows: 
 

/* Defaults */body{background: #494A5F;   Color: #D5D6E2;   font-weight:500;   Font-size:1.05em; font-family: "Microsoft Yahei", "", "Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;} A{color: #2fa0ec; text-decoration:none;outline:none;} A:hover,a:focus{color: #74777b;} html,body {height:100%;}   HTML {box-sizing:border-box; font-size:16px;} *,*:before,*:after {Box-sizing:inherit;}   body {margin:0;   line-height:1.5;   Font-family:roboto, Helvectica, Arial, Sans-serif; /*color: #333; */}/* main ie fix */main {display:block;} /* headers */h1 {font-size:2.2em;} h2 {Font-size:2em;} h3 {/*font-size:1.8em;*/}h4 {font-size:1.6em;} h5 {font-size:1.4em;} h6 {font-size:1.2em;} /* Anchor links */a {color: #009688;} a:hover,a:active {text-decoration:none;}   /* Inline block */.ib {display:-moz-inline-stack;   Display:inline-block;   Zoom:1;   *display:inline; Vertical-align:top;} /* Ul-reset */.ul-reset {padding-left: 0;   margin-top:0;   margin-bottom:0; List-style:none;}   /* wrapper */.wrapper {width:80%;   Margin-right:auto;   Margin-left:auto;   padding-right:20px; padding-left:20px;} /* Header */.header {text-align:center;}   /* Navigation */.navigation {background-color: #eee; font-weight:700;}.   navigation-list {font-size:0;   padding-top:10px; padding-bottom:10px;}. Navigation-item {Font-size:1.2rem;}.   Navigation-link {display:block;   position:relative;   padding:5px 20px;   Text-decoration:none;   Color: #333;   -webkit-transition:color. 2s ease-in-out; Transition:color. 2s ease-in-out;}.   Navigation-link:before {content: "";   Position:absolute;   bottom:0;   width:0; Border-bottom:solid 2px;}. Navigation-link:before {left:0;}. navigation-link:hover {color: #009688;}. Navigation-link:hover:before {width:100%;}.   navigation-link:before {-webkit-transition:width. 2s ease-in-out; Transition:width. 2s ease-in-out;}  /* Main */.main { padding-top:20px; padding-bottom:20px;}. content-article {margin-top:80px;}. content-article:first-child {margin-top:0;}. Content-article > H1:first-child {margin-top:0;}   /* Media queries */@media only screens and (max-width:1024px) {. wrapper {width:90%; }}
The local test results are as follows:


This article about CSS underline and the CSS mouse after the appearance of the underline effect introduced, I hope to have a friend in need to help.

Note:

The Text-decoration property specifies the adornment that is added to the text. The decorated color is set by the "Color" property. This property allows you to set some kind of effect on text, such as underlining. If the descendant elements do not have their own decorations, the decorations set on the ancestor elements "extend" to the descendant elements. User agents are not required to support blink.

The possible values that this property belongs to are:

None defaults. Defines the standard text.

Underline defines a line below the text.

Overline defines a line on the text.

The Line-through defines a line that passes through the text.

Blink defines the blinking text.

Inherit specifies that the value of the Text-decoration property should be inherited from the parent element.