css - 注意块:不能将垂直线延长到文本底部

这是一个注意块。

你可以帮帮我吗：


使黑线延伸到文本底部。
辐射的符号在这里看起来还可以。但是在我的真实项目中，其顶部高于垂直黑线的顶部。我什至不知道为什么。代码被完全复制。


你能给我踢一下吗？

.attention-block::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f7ba";
	font-size: 56px;
	float: left;
	color: red;
	border-right: 10px solid black;
	padding-right: 30px;
	margin-right: 20px;
	display: block;
}

.attention-block {
	background: linear-gradient(to right, #FEDB39, white);
	padding: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<p class="attention-block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset she</p>    

最佳答案

您可以只创建伪类position: absolute并调整填充。

这行得通，因为我指定了top和bottom位置。这意味着元素将拉伸以填充该内部空间。请记住，绝对位置不考虑填充，因此我必须使top, left, bottom数字与该段落的填充匹配。

同样，不要忘记给容器指定一个位置（在这种情况下为relative），以便绝对定位的元素具有上下文。

.attention-block::before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f7ba";
	font-size: 56px;
	color: red;
	border-right: 10px solid black;
	padding: 0 30px 0 0;
    /* top right bottom left */
    position: absolute;
    left: 40px;
    top:40px;
    bottom:40px;

}

.attention-block {
	background: linear-gradient(to right, #FEDB39, white);
	padding: 40px 40px 40px 160px;
    /* top right bottom left */
    position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<p class="attention-block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset she</p>