pseudo-element - CSS 虚线阴影

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

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

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

提前致谢。

最佳答案

像这样使用 position: relative;:

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