漂亮的文本下划线

提供了一种更好的替代方案来实现text-decoration: underline，其中下行字母不会截断下划线。

• 使用text-shadow来应用4个值的偏移，覆盖一个4x4像素的区域。这样可以确保下划线具有厚重的阴影，覆盖了下行字母截断下划线的位置。为了获得最佳效果，使用与background相匹配的颜色，并调整px值以适应更大的字体。
• 使用background-image和linear-gradient()以及currentColor创建一个渐变，作为实际的下划线。
• 设置background-position、background-repeat和background-size以将渐变放置在正确的位置。
• 使用::selection伪类选择器确保文本阴影不会干扰文本选择。

[!TIP]

这个功能在text-decoration-skip-ink: auto中原生实现，但对下划线的控制较少。

<div class="container">
  <p class="pretty-text-underline">漂亮的文本下划线，不会截断下行字母。</p>
</div>

.container {
  background: #f5f6f9;
  color: #333;
  padding: 8px 0;
}

.pretty-text-underline {
  display: inline;
  text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9,
    1px -1px #f5f6f9;
  background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.pretty-text-underline::selection {
  background-color: rgba(0, 150, 255, 0.3);
  text-shadow: none;
}