Css 在填充高度之前，我如何制作：：？_Css

Css 在填充高度之前，我如何制作：：？

css

Css 在填充高度之前，我如何制作：：？,css,Css,我有以下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.

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

它被渲染为：

我想用“>>”填充黑色：：before块来填充.datapoint div的高度，但我找不到一种方法。我已经将两者的高度都设置为100%，所以我有点困惑为什么这不起作用。

我找到了更好的解决方案，而不是提供了：

我制作了

：：在之前和标签元素显示内联块


我将标签
元素的行高
设置为字体大小

我将元素前面的的行高度设置为相同的值

增加了垂直对齐：顶部
到：：在元素之前


正文{
背景色：rgb（0,30,60）；
左边距：40px；
右边距：40px；
边缘顶部：20px；
颜色：rgb（250240250）；
字体系列：“Verdana”；
字体大小：35px；
}
.数据点：：之前{
内容：“>>”；
背景色：黑色；
颜色：白色；
字体大小：35px；
显示：内联块；
线高：60px；
垂直对齐：顶部；
}
.数据点{
边缘顶部：15px；
背景色：红色；
最大宽度：20em；
空白：nowrap；
}
.标签{
字体系列：'Courier New'；
字体大小：60px；
线高：60px；
显示：内联块；
左边距：15px；
}

这是一个测试。
建立在弗拉基米尔在评论中创建的小提琴之上，只需要添加填充物。看这个
上面的CSS将强制文本停留在一行上，因为任何新行都不会遵循右边的填充。我希望这有帮助
位置：绝对位置是使元素拉伸高度的原因。请参阅了解更多关于：before pseudo element的信息。您可以这样做，但这不是很好的解决方案：
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;
}

white-space:nowrap;