::before 和 ::after 内容总是在 <p> 内容之上和之下？

Question

对于一个项目，我需要在 <p> 内容前后获取 Font Awesome 报价图标。现在它始终显示在它的上方和下方。

这是 HTML：

<blockqoute>
<p><strong>Text</strong></p>
</blockqoute>

我正在使用的CSS：

blockquote {
  border: none;
  &:before {
    .fa();
      content: @fa-var-quote-left;
      position: relative;
      display: inline-block;
  }
  &:after {
    .fa();
    content: @fa-var-quote-right;
    display: inline-block;
    position: relative;
    float: right;
  }
}

这是我得到的：

qoute 图标需要在文本之前和之后开始。

我正在使用 CMS Typo3。

Answer 1

你需要在段落元素中添加::before和::after伪元素，并从after伪元素中移除float——因为p是块级元素，如果将伪元素应用于包含块，它们将独立成新行。

blockquote p {
  &::before {
    .fa();
    content: @fa-var-quote-left;
  }

  &::after {
    .fa();
    content: @fa-var-quote-right;
  }
}

可能不需要 position 和 display 属性，这取决于您将应用的其他样式。

Answer 2

您需要将所有元素都放在同一块级别上。
当您的 :before 是 inline-block 时，下面的“p”默认是 block，因此前后的每个内联元素都用换行符分隔。

我假设你需要设置

blockquote p { display: inline-block; }

::before 和 ::after 内容总是在 <p> 内容之上和之下？

::before and ::after content always above and beneath <p> content?

html

css

less