Question

正如标题所说 - 如何围绕伪元素包装文本？见下面的例子：

.area {
    position: relative;
}

.area:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 80px;
    height: 80px;
    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>

我做了一些初步研究并找到了答案：

Getting H1 text to wrap beside a ::before pseudo element

添加float: left;不起作用：

.area {
    position: relative;
}

.area:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;

    /*SO answer #1*/
    float: left;

    width: 80px;
    height: 80px;
    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>

这甚至可能吗？如果是这样 - 我最好如何完成它？

Answer 1

几乎就在那里，只需从第二次尝试中删除{{1}}。

Answer 2

从position: absolute;

中删除css

.area {
  position: relative;
}

.area:before {
  content: '';
  display: block;
  //position: absolute;
  left: 0;
  /*SO answer #1*/
  float: left;
  width: 80px;
  height: 80px;
  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>

如何在假元素之前包装文本？

2 个答案: