为什么 fontawesome chevron 需要 "::before" css 修饰符才能在下面的 bootstrap 手风琴代码中显示

Question

我正在考虑向 bootstrap 手风琴添加箭头，并在代码播放中遇到了这个示例：https://codepen.io/tmg/pen/PQVBGB HTML:

<div class="container">
  <div id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           <i class="fa" aria-hidden="true"></i>
            Collapsible Group Item #1
          </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

[data-toggle="collapse"] .fa::before {  
  content: "\f139";
}

[data-toggle="collapse"].collapsed .fa::before{
  content: "\f13a";
}

如果我删除 CSS 中的 ::before 修饰符，人字形将完全消失。但是，无论内容位于之前还是之后，内容都不应该改变吗？同样作为上述代码中的附带问题，::after 实际上并未将其插入文本“可折叠组项目#1”文本之后。这是为什么？

感谢您的帮助！

Answer 1

content 仅适用于虚拟元素，例如 ::before 和 ::after.

::after 添加一个虚拟子元素，该元素出现在父元素的其他子元素之后。您应用 class fa 的元素是 <i> 元素。在您的情况下，::after 添加了一个虚拟子元素，它出现在 <i> 的任何其他子元素之后，因为 fa 是 <i> 上的 class。（所以，回答你的附带问题，虚拟元素不会移动，因为它的父元素 <i> 不会移动。）

为什么 fontawesome chevron 需要 "::before" css 修饰符才能在下面的 bootstrap 手风琴代码中显示

Why do you need the "::before" css modifier for the fontawesome chevron to show in the following bootstrap accordion code

html

css

twitter-bootstrap

font-awesome

bootstrap-4