css - 注意 block : can't prolong the vertical line to the bottom of the text

Question

这是一个注意力 block 。

你能帮我吗:

1. 使黑线延伸到文本的底部。
2. 辐射符号在这里看起来不错。但在我的真实元素中，它的顶部高于垂直黑线的顶部。我什至不知道为什么。代码被准确复制。

你能踢我一脚吗？

.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>    

Answer 1

您不需要图标的 float，只需将父级设置为 display:flex。

.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;
  display: flex; /* added this */
}

<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>