html - 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 或 LESS？
感谢您的帮助。

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>