:: before，::选择器在使用position：absolute时进入下一行;

Question

我真的不明白这种行为背后的原因：http://codepen.io/gasim/pen/NPyjXB。我试图在选择器之前使用:: before，::创建一个有角度的边框。布局采用以下方式：

<div class="container">
   <div class="side left"></div>
   <div class="text">Hello World</div>
   <div class="side right"></div>
</div>

左侧的末端和右侧的开头应具有倾斜的边框。所以，我决定使用:: before和:: after，因为它给了我更多关于我想展示的能力：

.side {
   position: relative;
   width: 20%;
}

.side.left::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  width: 20px;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(15deg);
}

.side.right::after {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 20px;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(15deg);
}

左派完全按照我的意愿行事。但是，右边没有。它转到下一行，这没有任何意义，因为我使用绝对定位来解决这个问题：/

有人可以向我解释为什么会这样吗？

编辑：这是我的期望：

Answer 1

问题是.side有width: 20%而.text有width: 60%。但是，HTML中有一些空格，占用了额外的空间：

<div class="container">
  <div class="side left"></div>
  <div class="text">Hello World</div>
  <div class="side right"></div>
</div>

因此，最后.side不适合剩余空间，并放在下一行。由于::after伪元素与.side绝对定位（因为它有position: relative），因此伪元素也会转到下一行。

解决此问题的一些方法是使用float，font-size: 0或HTML评论：

<div class="container">
  <div class="side left"></div><!--
  --><div class="text">Hello World</div><!--
  --><div class="side right"></div>
</div>

＆＃13;

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}
.container {
  width: 100%;
  height: 50px;
  background: #1EAFEF;
}
.container > div {
  display: inline-block;
  vertical-align: top;
}
.container .text {
  line-height: 50px;
}
.container > .side {
  width: 20%;
  position: relative;
}
.container > .side.left::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
  width: 20px;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(15deg);
  transform: skewX(15deg);
}
.container > .side.right::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  /* this needs to be -15px; but it is barely visible so I put 0 for now */
  width: 20px;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(15deg);
  transform: skewX(15deg);
}
.container > .text {
  width: 60%;
  background: white;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="side left"></div><!--
--><div class="text">Hello World</div><!--
--><div class="side right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

有关更多解决方案，请参阅How to remove the space between inline-block elements?。

Answer 2

它下降到下一行，因为你的元素加起来超过100％。

方 - 20％+ 20px

text - 60％

方 - 20％+ 20px

总计= 100％+ 40px

CSS：

* {
  margin: 0px;
  padding: 0px;
}

.container {
  width: 100%;
  height: 50px;
  background: #1EAFEF;
}

.container > div {
  display: inline-block;
  vertical-align: top;
}

.container .text {
   line-height: 50px;  
}


.container > .side {
  width: 19%;
  position: relative;
}

.container > .side.left::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 0;
  right: -3%;
  width: 4%;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(15deg);
}

.container > .side.right::after {
  content: "";
  position: absolute;
  display: inline-block;
  top: 0px;
  left: -3%;
  width: 4%;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(-15deg);
}

.container > .text {
  width: 60%;
  background: white;
  text-align: center;
}

http://codepen.io/techsock/pen/dPdWgv

这将使你达到100％的宽度。

Answer 3

不确定您的版本究竟是什么问题，但我有一个简化的版本：

* {
  margin: 0px;
  padding: 0px;
}

.container {
  height: 50px;
  background: #1EAFEF;
}

.container > .text {
  position: relative;
  width: 60%;
  margin: 0 auto;
  background: white;
  text-align: center;
  line-height: 50px;
}

.container::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc(20% - 10px);
  width: 20px;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(15deg);
}

.container::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(20% - 10px);
  width: 20px;
  height: 50px;
  background: #1EAFEF;
  -webkit-transform: skewX(15deg);
}

<div class="container">
  <div class="text">Hello World</div>
</div>