如何在填充高度前填寫::？

我有以下HTML：如何在填充高度前填寫::？

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="brokencss.css"> 
</head> 
<body> 
    <div class="datapoint"> 
    <span class="label"> 
     This is a test. 
     </span> 
    </div> 
</body> 
</html>

和CSS：

body { 
    background-color: rgb(0,30,60); 
    margin-left:40px; 
    margin-right:40px; 
    margin-top:20px; 
    color: rgb(250,240,250); 
    font-family: 'Verdana'; 
    font-size: 35px; 
} 

.datapoint::before { 
    content: ">>"; 
    background-color:black; 
    color: white; 
    height:100%; 
} 

.datapoint { 
    margin-top: 15px; 
    max-width: 20em; 
    background-color: red; 
    height:100%; 
} 

.label { 
    font-family:'Courier New'; 
    font-size:60px; 
}

其呈現這樣的：http://imgur.com/0oVTuGw

我想黑::使用「>>」來塊之前填充.datapoint div的高度，但我找不到一種方法來做到這一點。我將兩者的高度都設置爲100％，所以我有點困惑，爲什麼這不起作用。

來源

2015-07-11 James Wright

你可以這樣做，但它不是很好的解決方案：https：//jsfiddle.net/ahuLwgsm/ –

我發現，而不是我提供更好的解決方案：

我做::before和label元素顯示inline-block。
我設置了元素的line-height等於font-size。
我設置了::before元素的line-height具有相同的值。
將vertical-align: top;添加到::before元素。

body { 
 
    background-color: rgb(0,30,60); 
 
    margin-left:40px; 
 
    margin-right:40px; 
 
    margin-top:20px; 
 
    color: rgb(250,240,250); 
 
    font-family: 'Verdana'; 
 
    font-size: 35px; 
 
} 
 

 
.datapoint::before { 
 
    content: ">>"; 
 
    background-color:black; 
 
    color: white; 
 
    font-size: 35px; 
 
    display: inline-block; 
 
    line-height: 60px; 
 
    vertical-align: top; 
 
} 
 

 
.datapoint { 
 
    margin-top: 15px; 
 
    background-color: red; 
 
    max-width: 20em; 
 
    white-space: nowrap; 
 
} 
 

 
.label { 
 
    font-family:'Courier New'; 
 
    font-size: 60px; 
 
    line-height: 60px; 
 
    display: inline-block; 
 
    margin-left: 15px; 
 
}

<div class="datapoint"> 
 
     <span class="label"> 
 
      This is a test. 
 
     </span> 
 
    </div>

來源

2015-07-11 21:13:49

建立在弗拉基米爾在他的評論中創建的小提琴，只需要填充的頂部增加。看到這個fiddle illustrating a solution。

white-space:nowrap;

上面的CSS將強制文本留在一行上，因爲任何新行不會遵守填充權限。我希望這有幫助。

position: absolute;是什麼讓你的元素拉伸高度。請參閱this question瞭解更多關於：在僞元素之前。

來源

2015-07-11 21:14:33 junkystu

如何在填充高度前填寫::？

回答

相關問題