Question

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

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

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

下划线我需要一个底部阴影。我认为盒子阴影不是这种情况，唯一可行的解决方案是通过伪元素来实现。我是这样做的：

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

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

希望这会有所帮助

CSS虚线投影

2 个答案: