根据元素大小调整大小的伪元素答案

【问题标题】：Resizable Pseudo elements based on Element size根据元素大小调整大小的伪元素
【发布时间】：2017-07-28 21:57:42
【问题描述】：

我目前在我正在构建的 web 应用程序中有一个功能，它有一个 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 解决方案？

【问题讨论】：

当您的文本具有某种背景颜色即可以合并到其容器背景时，替代解决方案可能类似于this。
@vivekkupadhyay 啊，这实际上是一个很好的解决方案，应该适用于我的项目。随意添加它作为答案，我会接受它。
css-tricks.com/line-on-sides-headers

标签： jquery html css css-selectors pseudo-element

【解决方案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%的固定宽度，更好的响应式。

【讨论】：

我重新排列了答案并删除了无用的样式。

【解决方案2】：

一个很好的解决方法是，将文本放在任何标签中，并将background-color 分配给该标签，类似于其父级或容器的background-color，然后您可以调整窗口/容器的大小以获得所需的效果.

代码片段

.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

【讨论】：