图像和文本换行前的Psuedo

Question

p.note:before {
content: "";
width: 30px;
height: 50px;
float: left;
margin: 0 6px 0 0;
background: url(../images/note-icon.png) no-repeat;
}
.note {
font-family:  arial, sans-serif !important; 
background-color: transparent !important;
border: 1px solid #6F1425 !important;
}

你好，

我试图在正文之前强制使用：：before伪元素(记事本的图像(的垂直高度。较长的文本在图像下方换行，但我想防止这种情况发生。然而，包含绝对高度的尝试会延伸到元素之后/下方的其他内容中。

将图像垂直居中放在文本之前是可以接受的替代方案。

缩小以下示例的查看窗口(强制换行和添加文本行(，以了解我的意思。谢谢

https://codepen.io/psuedobeforehelp/pen/YzGKVOB

Answer 1

您可以这样做。在before元素中，您只需要将此代码放入

position:absolute;
left:20px;
top:50%;   // THIS LINE OF CODE HERE CENTERS THE IMAGE 
transform:translateY(-50%); // THIS LINE OF CODE HERE CENTERS THE IMAGE 

并将position:relative;添加到note类中，以防止before元素进入某个位置。

p.note:before {
content: "";
width: 30px;
height: 50px;
margin: 0 6px 0 0;
position: absolute;
background: red;
left: 10px;
top: 50%;
transform: translateY(-50%);
}

.note {
font-family:  arial, sans-serif !important; 
background-color: transparent !important;
border: 1px solid #6F1425 !important;
position:relative;
padding:20px 20px 20px 50px;
}

<p class="note"><span class="bold">Note</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>