CSS：之後＆：之前表現得很奇怪

好吧，所以我有一個簡單的div與高度和寬度設置。之前和之後也有高度和寬度設置。它們全部設置爲塊顯示，而僞元素的內容爲「」。CSS：之後＆：之前表現得很奇怪

：之前是內容，而不是之前。而之後：之前有一個奇怪的間距負荷。

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

來源

2016-06-10 Matt Cowley

的問題可能是大的line-height值，這些都是：前和：後呢？ – Stickers

你真正的問題是什麼？ ...以及'：after'之前的空格是由'line-height'造成的 – LGSon

@LGSon爲什麼：在顯示主div之前？任何爲什麼行高會影響它，因爲行高與div的高度相同？ –

爲了保持現有的標記，你可以使用position: absolute，如果你需要的股利，以適應周圍的元素，給它一個與僞寬度相匹配的左/右邊距。

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

來源

2016-06-10 19:07:31 LGSon

CSS：之後＆：之前表現得很奇怪

回答

相關問題