CSS :after & :before acting very strangely

Question

好的，我有一个设置了高度和宽度的简单 div。前后也设置了高度和宽度。它们都设置为显示为 block ，伪元素的内容为“”。

:before 在内容里面，而不是在它之前。:after 之前有一大堆奇怪的间距。

HTML:

<div class="board">
   Hi
</div>

CSS:

.board {
  width: 260px; /*300 - 40*/
  height: 400px; /*480 - 40 - 40*/
  line-height: 400px;
  color: #164d87;
  font-size: 20px;
  font-weight: 900;
  margin: 0 auto;
  background:
    linear-gradient( 0deg,
      rgba(2, 188, 226, 0.5) 0%,
      rgba(51, 219, 253, 0.5) 25%,
      rgba(51, 219, 253, 0.5) 75%,
      rgba(2, 188, 226, 0.5) 100%
    );
  text-align: center;
  border: 3px solid #2B2B2B;
}
.board:before, .board:after {
  content: "";
  display: block;
  height: 40px;
  width: 300px;
  margin-left: -20px;
}

代码笔:http://codepen.io/MattCowley/pen/ZOQMNg

Answer 1

要保留现有标记，您可以使用 position: absolute，如果您需要 div 调整到周围的元素，请给它一个与伪宽度匹配的左/右边距。

.board {
  position: relative;
  width: 260px; /*300 - 40*/
  height: 400px; /*480 - 40 - 40*/
  line-height: 400px;
  color: #164d87;
  font-size: 20px;
  font-weight: 900;
  margin: 40px auto 0;
  background:
    linear-gradient( 0deg,
      rgba(2, 188, 226, 0.5) 0%,
      rgba(51, 219, 253, 0.5) 25%,
      rgba(51, 219, 253, 0.5) 75%,
      rgba(2, 188, 226, 0.5) 100%
    );
  text-align: center;
  border: 3px solid #2B2B2B;
}
.board:before, .board:after {
  content: "";
  position: absolute;
  display: block;
  height: 40px;
  width: 100%;
  background: red;
}
.board:before, .board:after {
  bottom: calc(100% + 3px);      /*  3px for the border  */
}
.board:after {
  top: calc(100% + 3px);
}

<div class="board">
   Hi
</div>