基于元素大小的可调整大小的伪元素

Question

我目前在我正在构建的网络应用程序中有一个功能，它有一个 span 和一些内部文本以及 :before 和 :after 伪元素，它们只是用作一行在文本的每一侧。

这里 JSFiddle 准确地表达了我的意思。

.container{
  position: relative;
  width: 100%;
  margin-top: 27px;
  margin-bottom: 18px;
  text-align: center;
}

.container .pseudos {
  font-size: 14px;
  display: inline-block;
  color: #999;
}

.container .pseudos:before, .container .pseudos:after {
  position: absolute;
  top: 10px;
  display: inline-block;
  width: 30%;
  height: 1px;
  content: '';
  background-color: #999;
}

.container .pseudos:before {
  left: 0;
}

.container .pseudos:after {
  right: 0;
}

但是，如果您在 JSFiddle 上拖动中间的拖动条，您会注意到 :before 和 :after 元素会聚合在看起来不太好看的实际文本上。

我是否可以添加一些 CSS 规则来使 :before 和 :after 元素自行收缩而不是聚合到文本上？

甚至 JS/Jquery 解决方案？

Answer 1

请看一下这个（Flex Box 解决方案）

.container .pseudos::before, .container .pseudos::after { 
 height: 1px;
 content: '';
 background-color: #999;
 flex: 1;
 margin: 9px;
}
.container {
 position: relative;
 width: 100%;
 margin-top: 27px;
 margin-bottom: 18px; 
 display: flex;
 justify-content: center;
}

<div class="container">
<span class="pseudos" style="display: flex;flex-wrap: nowrap;width: 100%;"> My Very Long Piece Of Text Goes Here</span>
</div>

这样去除了30%的固定宽度，更好的响应式

Answer 2

一个很好的解决方法是，当您将文本放在任何标签中并为该标签分配一个类似于其父级或容器的 background-color 的 background-color 时，您可以调整 window/container 以获得所需的效果。

代码片段

.container {
  position: relative;
  width: 100%;
  margin-top: 27px;
  margin-bottom: 18px;
  text-align: center;
}

.container .pseudos {
  font-size: 14px;
  display: block;
  color: #999;
  position: relative;
}

.container .pseudos span {
  display: inline-block;
  background: #ffffff;
  padding: 5px 15px;
  position: relative;
}

.container .pseudos:before {
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #999;
}

<div class="container">
  <span class="pseudos"><span>My Very Long Piece Of Text Goes Here</span></span>
</div>

JSFiddle

基于元素大小的可调整大小的伪元素

Resizable Pseudo elements based on Element size

html

css

jquery

css-selectors

pseudo-element

代码片段