如何在css中为下划线和上划线设置不同的颜色？答案

【问题标题】：How to have different color for underline and overline in css?如何在css中为下划线和上划线设置不同的颜色？
【发布时间】：2017-12-29 19:01:19
【问题描述】：

我现在有这个

p {
  text-decoration: underline overline red;
}

<p>
This is some text
</p>

在这里，我想为overline 和underline 设置不同的颜色。

这可能吗？

【问题讨论】：

这里回答stackoverflow.com/questions/45791793/…
@SreeWarr Oi 谢谢。我尝试搜索，但没有找到那个答案。很高兴你帮忙。

标签： html css text-decorations

【解决方案1】：

在p里面放一个span，然后你可以在span的overline上设置不同的颜色。

p {
  text-decoration: blue underline ;
}
span {
  text-decoration: red  overline;
}

&lt;p&gt;&lt;span&gt;This is some text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ut iusto optio, similique iure. Autem facilis, eveniet vel ea mollitia ad obcaecati dignissimos nisi, reiciendis odio voluptas, aliquid iure voluptatibus.&lt;/span&gt;&lt;/p&gt;

【讨论】：

【解决方案2】：

据我所知，您只能设置一次text-decoration-color，并且所有装饰都将具有相同的颜色。您使用的语法目前仅适用于 Firefox。其他浏览器将需要 -webkit 之类的前缀，并且可能需要在浏览器中启用实验性功能。

一个更普遍兼容的解决方案是为您的文本应用边框。你将能够达到你想要的效果，它会在任何地方兼容。

p {
  border-top: 1px solid blue;
  border-bottom: 1px solid red;
  display: inline-block;
}

&lt;p&gt;Testing&lt;/p&gt;

【讨论】：

这与上/下线有很大不同。如果没有inline-block，它将无法工作，并且不适用于多行。