CSS - Underline, strikethrough and overline (with styles and colors) in one element
Question
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)
but I can't use few text-decorations in one element like this:
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> ? Maybe I can use ::after and ::before or another languages like SASS or LESS?
Thanks for help.
6 answers
solution1
5 ACCPTED 2017-08-29 06:54:48
Use display:inline-block and border-top and border-bottom and 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>
solution2
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>
solution3
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>
solution4
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>
solution5
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>
solution6
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.