在填充高度之前，如何制作::

Question

I have the following HTML: 我有以下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>

and CSS: 和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;
}

which is rendered like: http://imgur.com/0oVTuGw 呈现为： http : //imgur.com/0oVTuGw

I want the black ::before block with the ">>" to fill the height of the .datapoint div but I can't find a way to do this. 我希望带有:: >>的黑色:: before块填充.datapoint div的高度，但我找不到解决方法。 I've set height of both to 100% so I'm a bit confused as to why this doesn't work. 我将两者的高度都设置为100％，因此我对为什么不起作用感到困惑。

Answer 1

I found better solution rather than I've provided: 我找到了比我提供的更好的解决方案：

I made ::before and label elements displayed inline-block . 我使::before和label元素显示为inline-block 。
I set line-height of the label element equals to font-size . 我将label元素的line-height设置为font-size 。
I set line-height of the ::before element the same value. 我将::before元素的line-height设置为相同的值。
Added vertical-align: top; 添加了vertical-align: top; to the ::before element. 到::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>

Answer 2

Built on top of the fiddle created by Vladimir in his comment, which only needed the padding added. 建立在弗拉基米尔（Vladimir）在他的评论中创建的小提琴之上，只需要添加填充即可。 See this fiddle illustrating a solution . 请参阅此小提琴说明解决方案。

white-space:nowrap;

The above CSS Will force the text to stay on one line as any new lines will not obey the padding right. 上面的CSS将强制文本停留在一行上，因为任何新行都将不遵守填充规则。 I hope this helps. 我希望这有帮助。

The position: absolute; position: absolute; is what makes your element stretch height. 是什么使元素拉伸高度。 Please see this question for more about :before pseudo element. 请参阅此问题以获取有关：before伪元素的更多信息。

在填充高度之前，如何制作::

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-07-11 21:13:49

解决方案2
0 2015-07-11 21:14:33

在填充高度之前，如何制作::

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-07-11 21:13:49

解决方案2 0 2015-07-11 21:14:33

解决方案1
0 已采纳 2015-07-11 21:13:49

解决方案2
0 2015-07-11 21:14:33