css手风琴加号和减号图标未正确过渡

Question

情况如下。

我已经使用纯 CSS 和引导程序建立了一个手风琴。我遇到的问题是图标在开头显示 - ，但它应该在开头显示 + 号。

这是当前的 css 代码

   button.btn.btn-link::before {
      content: '';
      width: 14px;
      height: 2px;
      background: #333;
      position: absolute;
      top: calc(50% - 1px);
      right: 1rem;
      display: block;
      transition: all 0.3s;
   }

   button.btn.btn-link::after {
      content: '';
      width: 2px;
      height: 14px;
      background: #333;
      position: absolute;
      top: calc(50% - 7px);
      right: calc(1rem + 6px);
      display: block;
      transition: all 0.3s;
    }

     button.btn.btn-link[aria-expanded='false']::before {
       transform: rotate(180deg);
     }

     button.btn.btn-link[aria-expanded='true']::after {
        transform: rotate(45deg);
     }

      button.btn.btn-link[aria-expanded='true']::before {
        transform: rotate(180deg);
      }

如何在页面加载时显示加号，而仅在单击手风琴时显示减号。

谢谢你..

Answer 1

我的问题。问题是页面加载时我有 aria-expanded="true"，所以我设置了 aria-expanded="false" 并解决了问题。