::之前和之后的内容总是在<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为inline-block，则默认block以下的'p'，因此之前或之后的每个内联元素都会被换行符分隔。

我假设您需要设置

blockquote p { display: inline-block; }

Answer 2

您需要将::before和::after伪元素添加到段落元素中，并从after伪元素中删除float - 因为p是一个块级元素，如果将伪元素应用于包含块，它们将是自己的新行。

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

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

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