前端开发中如何用 CSS 实现文字两边带横线效果

这种效果通常是通过 CSS 的伪元素'::before'和'::after'来实现的。具体实现过程如下：

首先需要为该文字元素添加一个包裹容器，比如一个<span>标签。
为该容器添加 CSS 样式'position: relative;'，将其定位为相对定位。
为该容器添加 CSS 样式'display: inline-block;'，让其可以设置宽度和高度。
为该容器添加 CSS 样式'padding: 0 10px;'，让其左右留出一定的空隙。
为该容器添加 CSS 样式'border-bottom: 2px solid #000;'，设置下横线的样式。
为该容器添加 CSS 样式'overflow: hidden;'，将其内部溢出的内容隐藏起来。
为该容器添加伪元素'::before'和'::after'，分别用来添加左侧和右侧的竖线。
为伪元素'::before'和'::after'添加 CSS 样式'content: '';'，表示伪元素没有实际内容。
为伪元素'::before'和'::after'添加 CSS 样式'position: absolute;'，将其定位为绝对定位。
为伪元素'::before'和'::after'添加 CSS 样式'top: 50%;'，将其定位在容器的中央位置。
为伪元素'::before'和'::after'添加 CSS 样式'transform: translateY(-50%);'，将其垂直居中。
为伪元素'::before'和'::after'添加 CSS 样式'height: 2px;'，设置竖线的高度。
为伪元素'::before'添加 CSS 样式'left: 0;'，设置左侧竖线的位置。
为伪元素'::after'添加 CSS 样式'right: 0;'，设置右侧竖线的位置。

示例代码如下：

HTML 代码：

<span class="text-line">这是一段带横线的文字</span>

CSS 代码：

.text-line {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  border-bottom: 2px solid #000;
  overflow: hidden;
}

.text-line::before,
.text-line::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
}

.text-line::before {
  left: 0;
  width: 20px;
  background-color: #000;
}

.text-line::after {
  right: 0;
  width: 20px;
  background-color: #000;
}