Добавить значок перед текстом (несколько строк) css

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>