CSS - 一个元素中的下划线、删除线和上划线（带有样式和颜色）答案

【问题标题】：CSS - Underline, strikethrough and overline (with styles and colors) in one elementCSS - 一个元素中的下划线、删除线和上划线（带有样式和颜色）
【发布时间】：2018-02-06 12:22:30
【问题描述】：

我想只有一个 <span> 有三行（下划线、删除线和上划线），如下所示：（这只是示例，我想动态更改它）
@987654321 @
但我不能在这样的一个元素中使用少量text-decorations：

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

如何使用<span> 来做到这一点？也许我可以使用 ::after 和 ::before 或其他语言，如 SASS 或 LESS？
感谢您的帮助。

【问题讨论】：

一些文字 span { display:block;边框顶部：点 1px #000;边框底部：厚双#ff0000； text-decoration: line-through wavy aqua； }
谢谢，但我不能用边框做波浪下划线
使用文本装饰：line-through wavy aqua；作为罢工和顶线和底线使用边框;
好的，但是边框没有wavy 样式

标签： html css

【解决方案1】：

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>

【讨论】：

示例使用 span1、span2、span3 但适用于 span。

【解决方案2】：

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

&lt;span&gt;Some Text&lt;/span&gt;

对于第一条评论

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;
}

&lt;span&gt;Some Text&lt;/span&gt;

最后一条评论

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;
}

&lt;span&gt;Some Text&lt;/span&gt;

【讨论】：

谢谢，但边框没有“波浪”样式。如果我想得到波浪形的红色下划线和一些罢工和上划线怎么办？
@KacperG。我已经更新了代码，这是你需要的吗？
是的。非常感谢。
我有一个问题。我可以对::after 和::before 执行的操作将始终与主要<span> 具有相同的文本？

【解决方案3】：

希望下面的代码对你有所帮助

<!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>

【解决方案4】：

例子：

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>

【讨论】：

【解决方案5】：

尝试使用显示块和边框

span{
  display:inline;
  border-top:dotted 5px #000;
  border-bottom:thick double #ff0000;
  text-decoration: line-through wavy aqua;
  font-size:5rem;
  width: auto;
}

&lt;span&gt;Some Text&lt;/span&gt;

【讨论】：

谢谢，但border 没有“波浪”风格。如果我想得到波浪形的红色下划线和一些罢工和上划线怎么办？
你可以参考这里stackoverflow.com/questions/28152175/a-wavy-underline-in-css

【解决方案6】：

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;
}

&lt;span&gt;Text decoration&lt;/span&gt;

【讨论】：

谢谢，但边框没有“波浪”样式。如果我想得到波浪形的红色下划线和一些罢工和上划线怎么办？