Question

我目前在我正在构建的webapp中有一个功能，其中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 解决方案）

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

通过这种方式，固定宽度30％被移除，并且响应更好。

Answer 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

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

2 个答案:

代码段