技术问题：如何实现文本环绕:before伪元素？

嘿，这个问题我太懂啦！你当前的代码里给:before伪元素用了position: absolute，这个属性会让元素完全脱离文档流，文本根本没法“绕”过它。想要实现文本环绕效果，咱们把定位改成**浮动（float）**就可以啦，具体调整如下：

核心改动点 #

• 去掉position: absolute相关的定位属性（position: absolute、left: 0这些都不需要了）
• 添加float: left让伪元素浮动到左侧
• 可以加个margin-right和margin-bottom，让文本和伪元素之间保留合适的间距，看起来更美观

修改后的完整代码 #

.area {
  /* 这里不需要position: relative了，因为不用绝对定位啦 */
}
.area:before {
  content: '';
  display: block;
  float: left; /* 关键：用浮动代替绝对定位 */
  width: 80px;
  height: 80px;
  margin-right: 10px; /* 文本和图标之间的右间距 */
  margin-bottom: 5px; /* 换行后文本和图标之间的下间距 */
  background-image: url('https://image.flaticon.com/sprites/new_packs/181501-interface.png');
  background-position: 7px -278px;
}

<div class="area">
  <p>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>
</div>

原理很简单：浮动元素会占据文档流的一侧空间，后续的文本内容会自动环绕在它周围，这正是你想要的效果~

内容的提问来源于stack exchange，提问作者user5481714