css - 带有文字装饰的文字阴影

Question

我正在寻找一种在 h2 标签上使用文本阴影并在文字上加下划线的方法。问题是，文本阴影也在下划线上。如何使下划线没有文字阴影？

*

css:
.pagetitle {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  text-decoration: underline;
  text-decoration-color: grey;
}

*

Answer 1

您需要将下划线与文本分开。为此，您可以使用 linear-gradient 或伪元素 (::before) 生成带背景的下划线。

.pagetitle {
  display: inline-block;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background: linear-gradient(transparent calc(100% - 2px), grey calc(100% - 2px));
}

<h2 class="pagetitle">I'm the Page Title</h2>