pseudo-element - 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;
}