html - 如何在CSS中为下划线和上划线设置不同的颜色？

Question

我现在有这个

p {
  text-decoration: underline overline red;
}

<p>
This is some text
</p>

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

这可能吗？

Answer 1

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

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

<p><span>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.</span></p>