Question

好的，所以我有一个设置了高度和宽度的简单div。前后也有高度和宽度设置。它们都被设置为显示为块，伪元素具有内容＆＃34;＆＃34;。

：之前是内容，而不是之前。并且：之前有一堆奇怪的间距。

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

Codepen：http://codepen.io/MattCowley/pen/ZOQMNg

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS：之后＆amp; ：在表现得非常奇怪之前

1 个答案: