CSS - 在一个元素中使用下划线，删除线和上划线（使用样式和颜色）
[英]CSS - Underline, strikethrough and overline (with styles and colors) in one element
问题描述
I want to get only one <span> with three lines (underline, strikethrough and overline) like this: (That is only example, I want to change it dynamically) 
我想只得到一个带有三行（下划线，删除线和上划线）的<span> ，如下所示:(这只是一个例子，我想动态地改变它）
but I can't use few text-decorations in one element like this: 但是我不能在这样的一个元素中使用很少的text-decorations ：
span {
text-decoration: overline dotted green;
text-decoration: line-through wavy aqua;
text-decoration: underline double red;
}
How can I do this using one <span> ? 我怎么能用一个<span>来做到这一点？ Maybe I can use ::after and ::before or another languages like SASS or LESS? 也许我可以使用::after和::before或其他语言，如SASS或LESS？
Thanks for help. 感谢帮助。
6 个解决方案
解决方案1
5 已采纳 2017-08-29 06:54:48
Use display:inline-block and border-top and border-bottom and text-decoration 使用display:inline-block和border-top以及border-bottom和text-decoration
span{ display:inline-block; border-top:dotted 1px #000; border-bottom:thick double red; text-decoration: line-through wavy aqua; }
<span>Some Text</span>
For the first comment 对于第一个评论
span{ display:inline; text-decoration: line-through wavy aqua; font-size:22px; position: relative; } span:after { position: absolute; content: "Some Text"; left: 0; top: 0; text-decoration: underline wavy red; z-index:-1; color:white; } span:before { position: absolute; content: "Some Text"; left: 0; top: 0; text-decoration: overline wavy black; z-index:-1; color:white; }
<span>Some Text</span>
For the last comment 对于最后的评论
span{ display:inline; text-decoration: line-through wavy aqua; font-size:22px; position: relative; } span:after { position: absolute; content: "S"; left: 0; top: -100%; text-decoration: underline wavy black; z-index:-1; color:white; width: 100%; letter-spacing: 1000px; overflow: hidden; } span:before { position: absolute; content: "S"; left: 0; top: 0; text-decoration: underline wavy red; z-index:-1; color:white; width: 100%; letter-spacing: 1000px; overflow: hidden; }
<span>Some Text</span>
解决方案2
3 2017-08-29 06:51:17
Try using display block, and borders 尝试使用显示块和边框
span{ display:inline; border-top:dotted 5px #000; border-bottom:thick double #ff0000; text-decoration: line-through wavy aqua; font-size:5rem; width: auto; }
<span>Some Text</span>
解决方案3
2 2017-08-31 18:03:40
span1 { text-decoration: line-through overline underline dotted green;; } span2 { text-decoration: line-through overline underline wavy aqua; } span3 { text-decoration: line-through overline underline double red; }
<span1>Some text</span1> <span2>Some text</span2> <span3>Some text</span3>
解决方案4
1 2017-08-29 06:54:08
span { display: inline-block; text-decoration: line-through overline underline; border-width: 1px 2px 3px 4px; border-style: solid dashed dotted none; border-color: red green blue yellow; padding: 10px; }
<span>Text decoration</span>
解决方案5
1 2017-08-29 06:57:22
Hope below code will help you 希望下面的代码可以帮助你
<!DOCTYPE html> <html> <head> <style> span1{ text-decoration: underline; } span2{ text-decoration: line-through; } span3{ text-decoration: overline; } </style> </head> <body> <span3><span2><span1>sometext</span1></span2></span3> </body> </html>
解决方案6
0 2017-08-29 06:56:46
Example : 示例：
span:first-child{ display:inline-block; border-top:dotted 1px #000; border-bottom:thick double #ff0000; text-decoration: line-through wavy aqua; }
<span>Some Text</span> <span>Some Text</span> <span>Some Text</span> <span>Some Text</span> <span>Some Text</span> <span>Some Text</span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.