我想要得到只有一个<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