CSS 虚线阴影

Question

假设我有一个带虚下划线的跨度：

<span class="underline">Hello, I'm underlined text</span>

.underline {
  color: #444;
  font-size: 250%;
  display:inline-block;
  border-bottom: 1px dashed #444;
}

我需要为下划线添加底部阴影。我认为 box-shadow 并非如此，唯一可能的解决方案是通过伪元素来实现。我正在这样做：

.underline:after {
  content:"";
  border-bottom: 1px dashed #ff0000;
  display: block;
 }

这会在下划线上方显示红色虚线，但我需要在下划线下方执行此操作。这怎么可能？

提前致谢。

Answer 1

position: relative;像这样使用：

.underline:after {
  content:"";
  border-bottom: 1px dashed #ff0000;
  display: block;
  position: relative;
  top: 2px;
}