[英]CSS - Underline, strikethrough and overline (with styles and colors) in one element
使用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>
對於第一個評論
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>
對於最后的評論
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>
嘗試使用顯示塊和邊框
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>
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>
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>
希望下面的代碼可以幫助你
<!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>
示例:
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.