某天經過一片翠綠的草地，看到地上有隻小蟲在蠕動，當牠奮力爬過一張寫著文字的紙條，我突然電 ( 靈 ) 光一閃！可不可以用純 CSS，在超連結的文字下方加上毛毛蟲蠕動效果呢？顧不得這隻小蟲回家了沒，我趕快回家打開電腦開始手刻 CSS，就這樣完成了這個效果！( 下方是我的想像的畫面 )

正文開始

通常在設計網頁的超連結時，不外乎都是使用文字顏色或背景色，進而搭配 transition 製作簡單的轉場，但如果熟練運用 CSS，就能做出更與眾不同的效果，這篇教學會使用 CSS 製作多種底線效果，除了有基本的變色和轉場，也會使用漸層色、動畫、SVG 製作別具特色的超連結底線動畫效果。

常見的超連結效果

下方列出幾種常見的超連結底線效果，分別是變色、轉場 transition、改變底線樣式與使用邊框效果，其中比較需要注意的是使用邊框作為底線，由於顯示類型為 inline 的元素無法控制高度，就無法控制底部邊框的位置，所以需要改為 inline-block 顯示類型，才能精準控制邊框位置。

• 參考：:hover、CSS 轉場 transition、text-decoration 文字裝飾、border-* 單一邊框
• 線上展示：https://codepen.io/oxxo/pen/MYWYmeV

<!-- HTML 程式碼 -->
<a href="#">STEAM 教育學習網</a> ( 預設 )
<br>
<a href="#" class="link-1">STEAM 教育學習網</a> ( hover )
<br>
<a href="#" class="link-2">STEAM 教育學習網</a> ( hover + transition: 0.5s )
<br>
<a href="#" class="link-3">STEAM 教育學習網</a> ( hover + 底線波浪狀 )
<br>
<a href="#" class="link-4">STEAM 教育學習網</a> ( hover + 邊框偽裝底線 )
<br>

<!-- CSS 程式碼 -->
<style>
  body {line-height: 2;}
  a[class] {color: blue;}       /* 有 class 的超連結文字為藍色 */
  a[class]:hover {color: red;}  /* 有 class 的超連結 hover 時文字為紅色 */

  .link-2 {transition: .5s;}    /* 轉場持續 0.5 秒 */

  .link-3:hover {text-decoration-style: wavy;}  /* 底線為波浪狀 */

  .link-4 {
    display:inline-block;           /* 改成 inline-block 顯示類型，才能控制底線位置 */
    text-decoration: none;          /* 隱藏底線 */
    line-height: 1;                 /* 調整行高，讓底部邊框靠近文字 */
    border-bottom: 2px solid blue;  /* 底部邊框樣式 */
  }
  .link-4:hover {border-bottom: 2px dotted red;} /* hover 時改變邊框顏色 */
</style>

使用漸層色，製作超連結底線效果

除了常見的超連結底線效果，也可以使用「漸層色」代替底線，不過因為漸層色「不支援轉場和動畫」，需要搭配 CSS 自訂屬性「@property」才能實現漸層色的動畫效果，下方範例開啟後，會使用漸層色的「轉場」和「動畫」產生有趣的底線效果。

• 參考：CSS 漸層色、CSS 漸層色的轉場與動畫、CSS @property 自訂屬性值、CSS 動畫 animation
• 線上展示：https://codepen.io/oxxo/pen/azbzWZX

<!-- HTML 程式碼 -->
<a href="#" class="link-5">STEAM 教育學習網</a> ( hover + 漸層色偽裝底線 + 轉場 )</body>
<br>
<a href="#" class="link-6">STEAM 教育學習網</a> ( hover + 漸層色背景動畫 )</body>

<!-- CSS 程式碼 -->
<style>
  body {line-height: 2;}
  a[class] {color: blue;}        /* 有 class 的超連結文字為藍色 */
  a[class]:hover {color: red;}  /* 有 class 的超連結 hover 時文字為紅色 */

  /* 建立自訂屬性 --c，類型為顏色 */
  @property --c {
    syntax: "<color>";
    inherits: true;
    initial-value: blue;
  }
  /* 建立自訂屬性 --y，類型為長度 */
  @property --y {
    syntax: "<length>";
    inherits: true;
    initial-value: 2px;
  }

  .link-5 {
    line-height: 1.3;
    display:inline-block;                   /* 改成 inline-block 顯示類型，才能控制尺寸 */
    text-decoration: none;                  /* 隱藏底線 */
    transition: all .5s, --c .5s, --y .5s;  /* 將自訂屬性套用轉場效果 */
    /* 背景漸層色中使用自訂屬性 */
    background: linear-gradient(0deg, 
      var(--c) 0, 
      var(--c) 2px, 
      #0000 var(--y), 
      #0000 100%);
  }
  /* hover 時改變自訂屬性 */
  .link-5:hover {
    --c: red;
    --y: 15px;
  }

  /* 建立自訂屬性 --dx，類型為長度 */
  @property --dx {
    syntax: "<length>";
    inherits: true;
    initial-value: 0;
  }
  .link-6 {
    line-height: 1.3;
    display: inline-block;   /* 改成 inline-block 顯示類型，才能控制尺寸 */
  }
  .link-6:hover {
    text-decoration: none;   /* 隱藏底線 */
    /* 漸層色中使用自訂屬性 */
    background: repeating-linear-gradient(
        to right,
        pink calc(var(--dx)),  pink calc(10px + var(--dx)),
        #0000 calc(10px + var(--dx)), #0000 calc(20px + var(--dx)));
    /* 執行動畫 */
    animation: oxxo 1s linear infinite;
  }
  /* 動畫中改變自訂屬性 */
  @keyframes oxxo {
    0% {--dx: 0;}
    100% {--dx: 20px;}
  }
</style>

使用 SVG，製作超連結底線動畫

如果熟悉 SVG，就能運用 SVG 作為背景圖，這種做法就不會受限於顯示類型或自訂屬性，只需要簡單的程式碼就能產生非常有特色的底線動畫，下方範例會用兩組 SVG 做出不同的超連結底線動畫效果。

• 參考：背景圖片 ( 定位、定位點、尺寸 )、CSS 動畫 animation
• 線上展示：https://codepen.io/oxxo/pen/YPzPVGP

<!-- HTML 程式碼 -->
<a href="#" class="link-7">STEAM 教育學習網</a> ( hover + SVG 波浪背景圖 + 動畫 )</body>
<br>
<a href="#" class="link-8">STEAM 教育學習網</a> ( hover + SVG 虛線背景圖 + 動畫 )</body>

<!-- CSS 程式碼 -->
<style>
  body {line-height: 2;}
  a[class] {color: blue;}        /* 有 class 的超連結文字為藍色 */
  a[class]:hover {color: red;}  /* 有 class 的超連結 hover 時文字為紅色 */

  .link-7:hover {
    text-decoration: none;
    /* 使用 SVG 圖片作為背景圖 */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 5"><path fill="none" stroke-width="1.5" stroke="%23f00" d="M0,0.5c4.1,0,4.1,4,8.2,4s4.1-4,8.2-4"/></svg>');
    background-repeat: repeat-x;   /* x 方向重複 */
    background-position: 0 100%;   /* 位置放在下方 */
    background-size: 16px auto;    /* 尺寸寬度數值與 viewBox 相同 */
    animation: oxxo1 1s linear infinite;   /* 執行動畫 */
  }
  @keyframes oxxo1 {
    0% {background-position: 0 100%;}
    100% {background-position: 16px 100%;}
  }

  .link-8:hover {
    text-decoration: none;
    /* 使用 SVG 圖片作為背景圖 */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5"><path fill="none" stroke-width="1.5" stroke="%23f00" d="M0,3h5"/></svg>');
    background-repeat: repeat-x;   /* x 方向重複 */
    background-position: 0 100%;   /* 位置放在下方 */
    background-size: 10px auto;    /* 尺寸寬度數值與 viewBox 相同 */
    animation: oxxo2 1s linear infinite;   /* 執行動畫 */
  }
  @keyframes oxxo2 {
    0% {background-position: 0 100%;}
    100% {background-position: 10px 100%;}
  }
</style>

小結

雖然對於大部分的網頁來說，超連結的效果並不是重點，但如果可以運用一點點的程式碼，就能替網頁加入一些小小的驚喜，也是滿有意思的。

• 原文參考：純 CSS 超連結底線動畫效果
• 延伸閱讀：CSS 教學大全