CSS给删除线设置颜色
在CSS中，默认的删除线（text-decoration: line-through）颜色与文本颜色相同。如果需要为删除线设置不同的颜色，可以通过以下方法实现：
方法一：使用 text-decoration-color
text-decoration-color 属性用于设置删除线、下划线或上划线的颜色。
示例：
.strikethrough {
text-decoration: line-through;
text-decoration-color: red; /* 删除线颜色 */
}
HTML：
<p class="strikethrough">这是一段带删除线的文字。</p>
说明：
text-decoration-color可以单独设置删除线的颜色。- 需要与
text-decoration: line-through一起使用。
方法二：使用伪元素 ::after
通过伪元素 ::after 创建自定义删除线。
示例：
.strikethrough {
position: relative;
display: inline-block;
}
.strikethrough::after {
content: "";
position: absolute;
left: 0;
top: 50%; /* 删除线位置 */
width: 100%;
height: 2px; /* 删除线粗细 */
background-color: red; /* 删除线颜色 */
transform: translateY(-50%); /* 垂直居中 */
}
HTML：
<p class="strikethrough">这是一段带删除线的文字。</p>
说明：
- 使用伪元素可以更灵活地控制删除线的样式和位置。
- 通过
top和transform调整删除线的垂直位置。
方法三：使用 linear-gradient
通过 linear-gradient 创建渐变删除线。
示例：
.strikethrough {
background-image: linear-gradient(to right, red, red); /* 删除线颜色 */
background-position: 0 50%; /* 删除线位置 */
background-size: 100% 2px; /* 删除线粗细 */
background-repeat: no-repeat;
}
HTML：
<p class="strikethrough">这是一段带删除线的文字。</p>
说明：
linear-gradient可以创建渐变效果的删除线。- 通过
background-position和background-size控制删除线的位置和粗细。
方法四：使用 box-shadow
通过 box-shadow 模拟删除线。
示例：
.strikethrough {
box-shadow: 0 2px 0 red; /* 删除线颜色和粗细 */
padding-bottom: 2px; /* 调整删除线与文本的间距 */
}
HTML：
<p class="strikethrough">这是一段带删除线的文字。</p>
说明：
box-shadow可以创建阴影效果的删除线。- 通过调整
box-shadow的偏移量和模糊半径控制删除线的样式。
方法五：使用 text-decoration 的简写属性
text-decoration 是一个简写属性，可以同时设置删除线的样式、颜色和粗细。
示例：
.strikethrough {
text-decoration: line-through red 2px; /* 删除线样式、颜色和粗细 */
}
HTML：
<p class="strikethrough">这是一段带删除线的文字。</p>
说明：
text-decoration的简写属性支持设置颜色和粗细。- 目前主流浏览器已支持该属性。
方法六：使用 svg 背景
通过 svg 背景创建自定义删除线。
示例：
.strikethrough {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="2"><line x1="0" y1="1" x2="100%" y2="1" stroke="red" stroke-width="2"/></svg>');
background-position: 0 50%; /* 删除线位置 */
background-repeat: no-repeat;
}
HTML：
<p class="strikethrough">这是一段带删除线的文字。</p>
说明：
- 使用
svg可以创建更复杂的删除线样式。 - 通过
background-position调整删除线的位置。
总结
实现删除线颜色的常见方法包括：
text-decoration-color：最简单直接的方式。- 伪元素
::after：适合复杂需求。 linear-gradient：支持渐变效果。box-shadow：模拟删除线。text-decoration简写属性：同时设置样式、颜色和粗细。svg背景：适合复杂样式。
根据具体需求选择合适的方式即可！
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
