Question

我想在<p>标签之前添加一个图标，该p标签的内容为多行。但是我有一个问题，第一行和第二行之间的距离太大，因为图标必须大于文本。

p::before {
  content: "0";
  background-color: yellow;
  color: red;
  font-size: 100px;
  font-weight: bold;
  vertical-align: middle;
  margin-left: -60px;
  position: relative;
}

p {
  padding-left: 80px;
}

<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<div class="abc">
  <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declavvhjhg hgcs ggdg gyfc vuiu uuhc uiugc uhgc jjvv juvvh hjvvred, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>
</div>

Answer 1

在绝对位置p标记内的内容之前添加绝对位置，且最小高度为110px；

p::before {
  content: "0";
  background-color: yellow;
  color: red;
  font-size: 100px;
  font-weight: bold;
  vertical-align: middle;
  margin-left: -60px;
  position: absolute;
}

p {
  padding-left: 80px;
  position: relative;
  min-height: 110px;
}

<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<div class="abc">
  <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declavvhjhg hgcs ggdg gyfc vuiu uuhc uiugc uhgc jjvv juvvh hjvvred, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>
</div>

在文本（多行）css之前添加图标

1 个答案: