CSS:将我的文本块放在我的图标的右边(完全)(:: before)

Question

我目前正在为我的网站处理一些警报消息,我想在左侧图标中放置一个将放在我的警报消息中:

.alert {
  padding: 20px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.alert p::before {
  content: "";
  background: red; /* Some icon */
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 5px;
}
.alert.success {
  background-color: rgb(221, 255, 181);
  color: rgb(139, 195, 74);
}

<div class="alert success">
  <p>Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur. Hae duae provinciae
    bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.</p>
</div>

正如你所看到的,我的图标位置很好,但我的文字不是.我希望文本完全放在右边.

Answer 1

由于伪元素的宽度是已知的,您可以pading-left向容器添加一些,并使用图标的绝对定位:

.alert p {
  position: relative; /* Become containing block of abspos children */
  padding-left: 25px; /* Push the text a 25px to the right */
}
.alert p::before {
  position: absolute; /* Take it out-of-flow */
  left: 0;            /* Place it at the left of its containing block */
}

.alert {
  padding: 20px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.alert p {
  padding-left: 25px;
  position: relative;
}
.alert p::before {
  content: "";
  background: red;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  position: absolute;
  left: 0;
}
.alert.success {
  background-color: rgb(221, 255, 181);
  color: rgb(139, 195, 74);
}

<div class="alert success">
  <p>Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur. Hae duae provinciae
    bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.</p>
</div>