CSS虚线投影效果

Question

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

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

这会在下划线上方显示红色虚线，但我需要在下划线下方显示。怎么做呢？

提前感谢。

- Sray

Answer 1

使用 position: relative; 代码，如下所示：

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

- Rakhat

Answer 2

我不确定为什么你不想使用box-shadow（除非是浏览器问题），但它可以解决这个问题。

box-shadow: 0px 10px #888888;

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

希望能对你有所帮助。

- Ian Wise

---

因为我需要一个下划线的阴影效果，而不是整个框体的实心阴影效果。请看上方的示例。 - Sray