[分享]css下划线被标点符号遮挡

CSS下划线的应用在网页设计中相当常见，但是有时候会出现下划线被标点符号遮挡的尴尬情况。例如：一段helloworld的文字中，应该是希望“helloworld”这个词汇被下划线标注。 但是在实际情况...

CSS下划线的应用在网页设计中相当常见，但是有时候会出现下划线被标点符号遮挡的尴尬情况。

例如：一段<span>hello-world!</span>的文字中，应该是希望“hello-world”这个词汇被下划线标注。
但是在实际情况中，如果CSS样式如下：

span{
  text-decoration:underline;
}

那么在“world!”这个单词后面的标点符号“!”就会盖住下划线，这显然不是我们所希望的效果。 

那么如何解决这个问题呢？

我们可以使用CSS的伪元素:last-child来解决这个问题，例如：

span:after {
  content:"";
  height:1px;
  background-color:black;
  display:inline-block;
  margin-left:5px;
}

这样，我们就将下划线的样式作为一个inline-block元素插入到了“hello-world”和“!”之间的空白区域，避免了标点符号的遮挡，实现了下划线的正确修饰。 

总结来说，CSS下划线被标点符号遮挡尴尬的情况可以通过使用伪元素:last-child来解决，这也是我们在网页设计中需要注意的细节之一。