html - 为什么要设置一个绝对定位的 :before content element to an inline element make it overflow its parent?

Question

请参阅此代码笔:

https://codepen.io/jossnaz/pen/BMwpjR

HTML

<br>
<div class="" style="
">
        <span class="" style="">
Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos hendrerit torquent pellentesque per euismod, velit molestie eleifend per rhoncus feugiat fermentum proin.

Suspendisse porttitor diam egestas curabitur malesuada netus enim bibendum, lacinia integer suscipit sem taciti ut nisi nunc, vivamus neque tempor dictum pretium condimentum litora.

Litora primis justo commodo posuere id nullam lacus tempor sociosqu cubilia auctor, nulla maecenas cubilia lacus quisque malesuada risus viverra mattis senectus porttitor ligula a fringilla dui elit nulla hendrerit in condimentum tortor.

Sollicitudin cursus augue semper sodales vitae pel
        </span>
      </div>

CSS

div{
  max-width: 500px;
  width: 500px;
  background-color: cornflowerblue;
}

blockquote, span{
  padding-left: 50px;
  background-color: salmon;
  position: relative;
  &:before {
    content: '“';
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 4.8rem;
    font-style: italic;
    line-height: 0.75;
    text-align: left;
    color: green;
    font-weight: normal;
}
}

结果元素溢出:

我想要什么？鲑鱼红色内联元素停止溢出其父元素。我想继续使用 :before 并且我想将它保留为内联元素。

Answer 1

您可以尝试 text-indent 而不是填充，并使伪元素相对于父容器:

div {
  max-width: 500px;
  width: 500px;
  background-color: cornflowerblue;
  text-indent:50px;
  position: relative;
}

span {
  background-color: salmon;
}
span:before {
  content: '“';
  position:absolute;
  left: 0;
  top: 6px;
  font-size: 4.8rem;
  font-style: italic;
  line-height: 0.75;
  text-align: left;
  color: green;
  font-weight: normal;
  text-indent:0;
}

<br>
<div>
  <span>
Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos hendrerit torquent pellentesque per euismod, velit molestie eleifend per rhoncus feugiat fermentum proin.

Suspendisse porttitor diam egestas curabitur malesuada netus enim bibendum, lacinia integer suscipit sem taciti ut nisi nunc, vivamus neque tempor dictum pretium condimentum litora.

Litora primis justo commodo posuere id nullam lacus tempor sociosqu cubilia auctor, nulla maecenas cubilia lacus quisque malesuada risus viverra mattis senectus porttitor ligula a fringilla dui elit nulla hendrerit in condimentum tortor.

Sollicitudin cursus augue semper sodales vitae pel
        </span>
</div>