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

标签 html css text-decorations

我现在有这个

p {
  text-decoration: underline overline red;
}
<p>
This is some text
</p>

在这里,我想为 overlineunderline 使用不同的颜色。

这可能吗?

最佳答案

将一个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>

关于html - 如何在CSS中为下划线和上划线设置不同的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48027189/

相关文章:

jquery - 用 span 元素替换复选框

javascript - 如何获取转到另一个页面上的特定 div 的链接

html - Flexbox 布局 - 过渡不起作用

html - 只需要在 Angular 9 的分页器中为 mat-select-option 的 div 添加类或样式

html - 文字装饰 : underline not applying with inline-block span elements

html - 为什么我的div旁边有href装饰?

css - 是否可以在 CSS 中使用 `text-decoration: underline;` 明确设置下划线文本的行高?

html - 为什么在 html 的 head 部分使用元标记 "Pragma"和 "Expires"

html - figcaption 显示在 img 上,但 figcaption 边框在悬停时显示在图像后面

css - Bootstrap 3 向右拉不工作