一般來說如果網頁要使用文字的修飾線條，都會用到 CSS 的「text-decoration」屬性，不過這個傳統的屬性並沒辦法做太多動態的變化，因此這次教大家使用另一個 CSS 屬性「background-image」實際製作動態下橫線（底線），首先看看效果：

基本上就是網頁連結 <a>，游標移上去後觸發 :hover 進而顯現出動態下橫線（底線）。

首先，HTML 如下：

<a href="#">萌芽網頁</a>
<br>
<a href="#">萌芽網頁<br>真是棒</a>

接著是 CSS：

a {
  color: #00174d;
  font-size: 19px;
  text-decoration: none;
  background-image: linear-gradient(#00174d, #00174d);
  background-position: left bottom;
  background-size: 0 2.5px;
  background-repeat: no-repeat;
  transition: background-size 0.15s linear;
}

a:hover {
  background-size: 100% 2.5px;
}

既然使用了「background-image」，「text-decoration」也就不需要了！記得一開始就將其設為 none，接著運用漸層背景置底，運用寬度變化來製作動態效果，參數都可以調整，目前動畫速度設定成 0.15 秒。

附上 CodePen：

See the Pen
動態下橫線（底線） - CSS - 萌芽の網頁設計實驗室 by Feng, Cheng-Chi (@qwe987299)
on CodePen.

Ionicons：精美開源圖標、Material & iOS 風格、可運用在網站上
📆 2019-01-18
📁 網站技術, HTML, CSS, JavaScript

Evil Icons:免費高品質向量圖標
📆 2017-02-22
📁 網路應用, 網站技術

JavaScript & CSS 陀螺儀使圖片三維翻轉
📆 2020-03-12
📁 網站技術, HTML, CSS, JavaScript

【網站設計】jQuery NailThumb 創立高解析縮圖
📆 2015-06-24
📁 網站技術, jQuery

Brackets：即時預覽，儲存檔案就立刻幫您重載網頁顯示結果
📆 2018-09-20
📁 軟體應用, 網站技術

PHP：glob() 取得匹配之檔案路徑、filesize() 取得指定檔案大小
📆 2021-10-22
📁 網站技術, PHP

CSS:反白特效
📆 2013-01-01
📁 網站技術, CSS

ScrollIt.js：建立頁面滾動導覽的 jQuery 插件
📆 2019-01-19
📁 網站技術, HTML, JavaScript, jQuery

《上一篇》Google Chrome & Microsoft Edge：開啟右鍵選單功能「建立分享 URL 用的 QR Code」 《下一篇》CSS backdrop-filter 原生背景毛玻璃