在CSS中，为文字中间添加横线，可以使用`text-decoration`属性，这个属性用于设置文本的装饰效果，如删除线、下划线等，要实现文字中间加横线的效果，可以将`text-decoration`属性设置为`underline`,并使用`::before`和`::after`伪元素来创建横线。
以下是一个示例代码：
.text-with-line {
position: relative;
}
.text-with-line::before,
.text-with-line::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: currentColor;
}
.text-with-line::before {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.text-with-line::after {
bottom: 0;
left: 0;
transform: translateY(50%);
}
将上述CSS代码应用到HTML元素上，即可实现文字中间加横线的效果：
<div class="text-with-line">这是一段带有横线的文字</div>
接下来，我们来看一些与本文相关的问题及解答：
1. 如何设置横线的样式？
答：可以通过修改`.text-with-line::before`和`.text-with-line::after`伪元素的背景颜色、宽度等属性来实现横线的样式，可以将`background-color`属性设置为不同的颜色值，或者调整`height`属性的值来改变横线的粗细。
2. 如何将横线从文字的开头移到结尾？
答：只需将`.text-with-line::before`和`.text-with-line::after`伪元素的`top`和`bottom`属性进行互换即可，将`top: 50%`改为`bottom: 50%`,将`transform: translateY(-50%)`改为`transform: translateY(50%)`，横线就会从文字的开头移到结尾。
3. 如何让横线始终保持在文字中间？
答：可以使用JavaScript或jQuery来实现这个功能，以下是一个使用JavaScript实现的示例代码：
function addLineToText(element) {
const text = element.innerText;
const lineHeight = parseInt(window.getComputedStyle(element).getPropertyValue(\'line-height\'), 10);
const lineWidth = parseInt(window.getComputedStyle(element).getPropertyValue(\'font-size\'), 10);
const middleIndex = Math.floor(text.length / 2);
const beforeText = text.slice(0, middleIndex);
const afterText = text.slice(middleIndex + 1);
element.innerHTML = `${beforeText}<span style="position: absolute; top: ${lineHeight}; left: ${middleIndex * lineWidth}px;">|</span>${afterText}`;
}
4. 如何将横线添加到其他类型的元素上？
答：可以将上述CSS代码中的`.text-with-line`类名替换为其他类名，然后将该类名应用到需要添加横线的元素上，如果需要将横线添加到一个具有`.my-element`类名的div元素上，可以这样写：
<div class="my-element">这是一段带有横线的文字</div>
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/435129.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
