如何在填充高度之前制作 ::before？答案

【问题标题】：How do I make ::before fill the height?如何在填充高度之前制作 ::before？
【发布时间】：2015-09-30 10:22:48
【问题描述】：

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

我希望带有“>>”的黑色 ::before 块填充 .datapoint div 的高度，但我找不到这样做的方法。我将两者的高度都设置为 100%，所以我有点困惑为什么这不起作用。

【问题讨论】：

你可以这样做，但这不是很好的解决方案：jsfiddle.net/ahuLwgsm

标签： css

【解决方案1】：

我找到了比我提供的更好的解决方案：

我将::before 和label 元素显示为inline-block。
我将label元素的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>

【讨论】：

【解决方案2】：

建立在弗拉基米尔在他的评论中创建的小提琴之上，只需要添加填充。看到这个fiddle illustrating a solution。

white-space:nowrap;

上面的 CSS 将强制文本保持在一行，因为任何新行都不会遵守填充权。我希望这会有所帮助。

position: absolute; 是让您的元素拉伸高度的原因。有关 :before 伪元素的更多信息，请参阅this question。

【讨论】：