以下的樣式可以讓連結更有趣，但當連結比較多時，我覺得也會造成視覺上的干擾，請慎重使用。這些樣式只是其中一種實現方式，其他實現方式就留結讀者自行探索了。

• 標記內部連結和外部連結。

  排除一些內部連結後，給其它外部連結添加一個圖標，從而和內部連結區分。

  a[href^='http']:not([href^='http://taxodium.ink']):not([href^='https://taxodium.ink']) {
    &::after {
      /* content: '↗'; */
      content: "​" / " (external)";
      font-size: 1em;
      display: inline-block;
      margin-inline-start: .2em;
      position: relative;
      top: .2em;
      height: 1em;
      width: 1em;
      mask-image: url("/images/common/external-link.svg");
      mask-size: cover;
      mask-repeat: no-repeat;
      color: currentColor;
      background-color: currentcolor;
    }
  }
  
  
  

  效果：

  • 內部連結：Taxodium
  • 外部連結：Taxodium - Wikipedia

  如果你是用的是 Unicode 或 Emoji 符號，要測試一下不同瀏覧器的表現，因為不同系統 (Android、iOS)，不同瀏覧器渲染出來的圖標會有差异，在自己瀏覧器上好看，在讀者的瀏覧器上可不一定。

• 顯示連結的 favicon。

  可以通過判斷域名 (a[href=<domain>]¹) ，結合 ::before、::after 等偽類元素顯示連結的 favicon。 favicon 可以用 Favicon.im 快速获取。

  a[href*="bilibili.com"],
  a[href*="youtube.com"],
  a[href*="wikipedia.org"],
  a[href*="developer.mozilla.org"]
  {
    &::before {
      content: '';
      display: inline-block;
      inline-size: 1em;
      block-size: 1em;
      margin-inline-end: .2em;
      vertical-align: middle;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
  
  a[href*="developer.mozilla.org"]::before {
    background-image: url("/images/common/favicon/developer.mozilla.org.ico");
  }
  a[href*="wikipedia.org"]::before {
    background-image: url("/images/common/favicon/wikipedia.org.ico");
  }
  a[href*="youtube.com"]::before {
    background-image: url("/images/common/favicon/youtube.com.ico");
  }
  a[href*="bilibili.com"]::before {
    background-image: url("/images/common/favicon/bilibili.com.ico");
  }
  

  效果：

  • 【4K】方大同「15」Live in HK 2011香港演唱会 (2:25:04) by 德文宝宝
  • The National - Vanderlyle Crybaby Geeks (Live in London) (4:11) by Rairun
  • Taxodium - Wikipedia
  • <a> HTML anchor element - HTML | MDN