滑鼠經過欄位時出現底線css怎麼實現？（導覽列程式碼範例）

網頁上導覽列樣式的設計尤為重要，那麼有哪些樣式可以令人眼前一亮呢？那麼這篇文章就給大家介紹一種當滑鼠經過導航時出現底線的特效。

css滑鼠經過出現底線特效實現的具體程式碼範例如下：

<div class="htmleaf-container">    <header class="header">        <div class="wrapper">            <h1 class="site-title">css滑鼠經過出現底線特效測試</h1>        </div>        <nav class="navigation">            <div class="wrapper">                <ul class="navigation-list ul-reset">                    <li class="navigation-item ib">                        <a href="#" class="navigation-link">                            Home                        </a>                    </li>                    <li class="navigation-item ib">                        <a href="#" class="navigation-link">                            About                        </a>                    </li>                    <li class="navigation-item ib">                        <a href="#" class="navigation-link">                            Contact                        </a>                    </li>                    <li class="navigation-item ib">                        <a href="#" class="navigation-link">                            FAQ                        </a>                    </li>                    <li class="navigation-item ib">                        <a href="#" class="navigation-link">                            More                        </a>                    </li>                </ul>            </div>        </nav>    </header>    <!-- /.header --></div>

style.css代碼如下：

/* 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 screen and (max-width:1024px) {   .wrapper {      width: 90%;   }}

本地測試結果如下：

本篇關於css底線及css滑鼠經過出現底線時特效介紹，希望對有需要的朋友有所協助。

註：

text-decoration 屬性規定添加到文本的修飾。修飾的顏色由 "color" 屬性設定。這個屬性允許對文本設定某種效果，如加底線。如果後代元素沒有自己的裝飾，祖先元素上設定的裝飾會“延伸”到後代元素中。不要求使用者代理程式支援 blink。

此屬性所屬的可能值有：

none 預設。定義標準的文本。

underline 定義文本下的一條線。

overline 定義文本上的一條線。

line-through 定義穿過文本下的一條線。

blink 定義閃爍的文本。

inherit 規定應該從父元素繼承 text-decoration 屬性的值。