前端开发中 一段文字两边有横线是怎么样实现的

这种效果通常是通过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;
}
``

前端开发中 一段文字两边有横线是怎么样实现的

前端开发中一段文字两边有横线是怎么样实现的