为啥你需要在下面的引导手风琴代码中显示 fontawesome chevron 的 "::before" css 修饰符

Posted 2023-03-06

【中文标题】为啥你需要在下面的引导手风琴代码中显示 fontawesome chevron 的 "::before" css 修饰符

【英文标题】：Why do you need the "::before" css modifier for the fontawesome chevron to show in the following bootstrap accordion code为什么你需要在下面的引导手风琴代码中显示 fontawesome chevron 的 "::before" css 修饰符

【发布时间】：2021-01-28 14:54:14

【问题描述】：

我正在考虑向 bootstrap 手风琴添加箭头，并在 codeplay 上遇到了这个示例：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 修饰符，则 V 形将完全消失。但是无论是在之前还是之后定位，内容都不应该改变吗？同样作为上述代码中的一个附带问题， ::after 实际上并没有在文本“可折叠组项目 #1”文本之后插入它。这是为什么呢？

感谢您的帮助！

【参考方案1】：

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

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

【讨论】：

非常感谢您的回答！完全有道理。

我今天心情不错，拿着这个+1去10K声望:-)