一般來說如果網頁要使用文字的修飾線條，都會用到 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.

HTML <a> download 屬性讓連結可直接執行下載
📆 2021-10-22
📁 網站技術, HTML

YouTube Subscribe Button 訂閱按鈕製作
📆 2016-11-23
📁 網路應用, 網站技術, 串流媒體

WordPress 網址異動，利用 SQL 指令快速更改
📆 2016-02-01
📁 網站技術, 資料庫, SQL, 架站程式, WordPress

OBS：新增日期與時間至錄影或串流中
📆 2019-08-21
📁 軟體應用, 多媒體, 網路應用, 網站技術, CSS, JavaScript, 串流錄製

JavaScript 抓參數可指定間隔時間不斷重新載入指定網址（OBS 瀏覽器自動重載解決方案）
📆 2019-08-22
📁 軟體應用, 多媒體, 網路應用, 網站技術, JavaScript, 串流錄製

【網站架設】為404錯誤設置自訂網頁教學
📆 2014-02-10
📁 網站技術

取得 WordPress Popular Posts REST API 熱門文章資訊至任何網頁 (AJAX 取得 JSON)
📆 2020-01-25
📁 網站技術, HTML, JavaScript, jQuery, 架站程式, WordPress

React 初嘗試(二)：利用 Babel CDN 讓瀏覽器直接跑 JSX
📆 2019-08-17
📁 網站技術, HTML, JavaScript, React

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