CSS -在一个元素中划线、划线和过线(带有样式和颜色)。

Question

我只想让只有一个 <span>，它有三行(下划线、划线和换行线)，如下所示(这只是一个例子，我想动态地更改它)

但是我不能在这样的元素中使用很少的text-decorations：

span {
    text-decoration: overline dotted green;
    text-decoration: line-through wavy aqua;
    text-decoration: underline double red;
}

我如何使用一个<span>来完成这个任务？也许我可以使用::after和::before或其他语言，如SASS或更少？

谢谢你帮忙。

Answer 1

使用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>

​

Answer 2

​

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>

​

Answer 3

尝试使用显示块和边框

​

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>

​