我想要得到只有一個<span>有三行（下劃線，刪除線和上劃線）像這樣:(這只是一個例子，我想更改動態）
但我不能在一個元素很少使用text-decorations這樣的：CSS - 在一個元素中加下劃線，刪除線和上劃線（包括樣式和顏色）
span {
text-decoration: overline dotted green;
text-decoration: line-through wavy aqua;
text-decoration: underline double red;
}
我怎樣才能做到這一點使用一個<span>？也許我可以使用::after和::before或SASS或LESS等其他語言？
感謝您的幫助。
使用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;
}
\t
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;
}
\t
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>謝謝，但邊框沒有'波浪'風格。如果我想要得到波浪形的紅色下劃線和一些罷工和上線怎麼辦？ –
@KacperG。我更新了代碼，這是你需要的嗎？ –
是的。非常感謝你。 –
嘗試使用顯示塊和邊框
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>謝謝，但'border'沒有'波浪'風格。如果我想要得到波浪式的紅色下劃線和一些罷工和上線怎麼辦？ –
你可以參考這裏https://stackoverflow.com/questions/28152175/a-wavy-underline-in-css – bdalina
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>謝謝，但邊界沒有'波浪'風格。如果我想要得到波浪形的紅色下劃線和一些罷工和上線怎麼辦？ –
例子：
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>希望下面的代碼將幫助您
<!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>我想用**只有一個**'' –
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>
某些文本 跨度 { 顯示：塊; border-top：dotted 1px＃000; border-bottom：double double＃ff0000; 文字裝飾：直通波浪水色; } – bdalina
謝謝，但我不能用邊框做波浪下劃線 –
使用text-decoration：直通波浪水色;因爲罷工和頂線和底線使用邊界; – bdalina