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

我有以下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

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

回答

相关问题