1. 前言
在网页设计中，有时需要让某段文字或标题显得更加突出，为此我们可以使用中间文字两边横线效果。这种效果可以很好的提高设计质量和美观程度，同时也增加了排版的灵活性。本文就来介绍如何使用CSS实现中间文字两边横线效果。
2. 实现步骤
2.1 创建HTML结构
首先，我们需要创建一个包含一个标题的HTML结构，如下所示：
<p class="title">CSS实现中间文字两边横线效果</p>
2.2 添加CSS样式
接下来，我们需要为标题添加样式，使用CSS中的伪元素:before和:after来实现横线效果，代码如下：
CSS
.title {
position: relative;
text-align: center;
font-size: 18px;
}
.title:before, .title:after {
content: "";
display: inline-block;
width: 40%;
height: 1px;
background-color: ccc;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.title:before {
left: 10%;
}
.title:after {
right: 10%;
}
该段代码实现的原理是，在标题所在的p标签上设置了position: relative属性，让其内部元素使用absolute属性定位。然后设置两个伪元素，分别为:before和:after，用于实现左右两端的线条。设置宽度为40%，高度为1px，颜色为灰色。
在:before伪元素上设置left属性，偏移到左侧；在:after伪元素上设置right属性，偏移到右侧。最后，使用transform来将其居中显示。
2.3 效果展示
最终效果如下图所示：
3. 总结
中间文字两边横线效果是一个简单但有效的网页设计技巧。使用CSS来实现这种效果非常方便，只需要几行代码就可以搞定。希望本文对大家有所帮助。