Html “应用伪类”；“之前”；及；“之后”；到多行文本

我试图在文本字段中添加一条伪前后垂直线，以便进行样式设置。这些元素需要与文本左对齐-20px，右对齐-20px

当文本作为内联块在一行上时，这种方法可以很好地工作，但是一旦文本跨越多行，宽度就会扩展到父元素的宽度，并且伪元素与文本的距离不再只有20px

有没有一种方法可以让我用CSS来完成这个任务

.container{
宽度：500px；
背景色：红色；
文本对齐：居中；
左边距：40px；
}
氢{
位置：相对位置；
显示：内联块；
保证金：0；
填充：0；
背景颜色：蓝色；
颜色：白色；
}
跨度{
位置：相对位置；
背景颜色：绿色；
}
h2：：之前，
h2：：之后{
内容：''；
位置：绝对位置；
排名：0；
宽度：4px；
高度：20px；
背景：黑色；
}
h2：：之前{
左：-20px；
}
h2：：之后{
右：-20px；
}

这是一个标题



我是龙格格

我已经将您的代码移到了这把小提琴上：并删除了

位置：绝对

，同时删除了一些其他样式，因为它们似乎不必要，我想我已经创建了您想要的样式

以下是更新后的CSS：

.container {
  width: 500px;
  background-color: red;
  text-align: center;
  margin-left: 40px;
}


h2{
  display: inline-block;
}

h2:after,
h2:before {
  content: "";
  width: 4px;
  height: 20px;
  background: #000000;
  display: inline-block;
  margin: 0 10px;
}

---

因此，从我所看到的是，这里的问题是，你在哪里应用了前后的边界。您需要更改应用边界的位置。从h2中删除它们，并添加一个新的html元素，该元素包装h2并应用于h2

例如：

以下是一个工作示例：

---

编辑：注释后更改的示例-

您是否尝试过

高度：100%在
h2:before
和
h2:before
上？您可以使用对齐的文本，比如在
中使用空格来填充剩余的空间吗？@JBDouble05nope@Ryan，为什么不呢？也许添加一张你正在尝试的图片会有帮助。嗨，驼鹿，谢谢你看一下！不幸的是，这不是我想要的（我意识到我原来的文章可能没有意义，我觉得很难解释。我希望垂直条总是从文本的左和右为20px，在你的代码框中，无论文本的左边，条都保持在相同的位置。不用担心。尽管你有没有想过把文本分割成更多的元素来获得。结果像我现在添加的答案中的编辑？嗨，尼拉姆，谢谢你看一下，但这不是我想做的。如果你看我的原始示例，你会看到单行是正确的，因为我的垂直条与文本的距离是20px。多行示例是不正确的，因为垂直条现在与文本的距离是20px
    <div class="container">
      <div class="headerwrap">
         <h2><span>This is loooonnggggggggggggggggggggggeeeeerrr</span></h2>
      </div>
    </div>

    <div class="container">
      <div class="headerwrap">
        <h2><span>This is a title</span></h2>
      </div>
    </div>

    .headerwrap::before,
    .headerwrap::after {
       content: '';
       position: absolute;
       top: 0px;
       bottom:0;
       margin:auto;
       width: 4px;
       height: 20px;
       background: black;
     }

     .headerwrap::before {
       left: 10px;
      }

      .headerwrap::after {
        right: 10px;
      }