HTML中 用CSS样式实现 文字两边添加水平线 并且可以适配

可以使用CSS中的伪元素来实现文字两边添加水平线的效果，并且使用百分比来适配不同尺寸的屏幕。

例如，以下代码可以实现这样的效果：

<p class="text-with-lines">这是一段文字</p>

.text-with-lines {
  position: relative;
  display: inline-block;
  padding: 0 10%;
  font-size: 20px;
}

.text-with-lines::before,
.text-with-lines::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background-color: black;
}

.text-with-lines::before {
  left: 0;
  transform: translateY(-50%);
}

.text-with-lines::after {
  right: 0;
  transform: translateY(-50%);
}

解释一下上述代码：

- 首先，给包含文字的元素设置一个相对定位（position: relative）和内边距（padding），以便给伪元素留出空间。
- 接着，使用伪元素（::before和::after）分别在文字的左右两侧添加一个水平线。设置宽度为40%，高度为1px，颜色为黑色，并且使用绝对定位（position: absolute）和偏移量（left、right、top，这里使用了百分比）将它们放在文字的左右两侧，同时使用transform将它们垂直居中（translateY(-50%)）。
- 最后，为了让水平线能够自适应不同尺寸的屏幕，设置包含文字的元素的内边距为百分比（padding: 0 10%），而不是固定像素值。

这样就可以实现文字两边添加水平线并且可以适配不同尺寸的屏幕的效果。