手风琴标签点击时label::after图标无法旋转的问题排查

核心问题：选择器逻辑完全错误 #

你写的选择器 #accordion label + input[type="radio"]:checked + label::after 存在两个致命问题：

• 你的HTML结构中，input 的下一个元素是 .content，根本没有第二个 label，所以这个选择器匹配不到任何元素
• CSS没有反向相邻兄弟选择器，无法通过选中的 input 去选择它前面的 label

之前控制 .content 有效是因为 input 后面确实紧跟 .content，但控制 label 时，你的选择器完全不符合DOM结构。

修复方案：调整HTML结构+修正CSS选择器 #

因为 input 和 label 通过 id 和 for 属性关联，两者位置互换不影响功能，我们把 input 放到 label 前面，这样就能用相邻兄弟选择器实现需求。

修改后的HTML结构（仅调整每个li内的顺序） #

<ul id="accordion">
  <li>
    <input type="radio" name="accordion" id="quantity-first">
    <label for="quantity-first">Estimations</label>
    <div class="content">
      <ul>
        <li>Preparing capital cost estimates for budget purposes and project approval through all the phases pre-concept to feasibility.</li>
        <li>Creating a compilation of budget cost though our in-house database of previously completed projects, quotations from equipment and special services suppliers.</li>
        <li>Conducting preliminary measures and elemental cost estimating.</li>
      </ul>
    </div>
  </li>
  <li>
    <input type="radio" name="accordion" id="quantity-second">
    <label for="quantity-second">Pre-Contract Services</label>
    <div class="content">
      <ul>
        <li>Preparing contract conditions, including special conditions.</li>
        <li>Standardisation of contract conditions and special conditions for any particular project</li>
        <li>Preparing tender bills of quantities for all construction contracts (e.g., civils, building, demolition works, structural, mechanical, piping, electrical and instrumentation, etc.)</li>
        <li>Assistance with compilation of vendor lists for client approval.</li>
        <li>Drafting of enquiry documents for tender purposes.</li>
        <li>Commercial tender evaluations, clarifications and adjudication reports.</li>
      </ul>
    </div>
  </li>
</ul>

修改后的CSS代码（标注关键修改） #

#accordion {
  margin: 100px auto;
  max-width: 500px;
}

#accordion li {
  list-style: none;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 5px;
  border-radius: 4px;
  background: none;
}

#accordion li label {
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.7rem;
  font-weight: 700;
  cursor: pointer;
  color: #000000;
  background: white;
  border: 2px solid black;
  border-radius: 4px;
}

#accordion .content {
  background: none;
}

#accordion .content li p {
  background: none;
}

/* 修改：直接隐藏input，不再依赖相邻兄弟选择器 */
#accordion input[type="radio"] {
  display: none;
}

#accordion .content {
  padding: 0 10px;
  line-height: 26px;
  max-height: 0;
  overflow: hidden;
  color: black;
  transition: max-height 1s;
}

/* 修改：用通用兄弟选择器~，因为input和content之间隔了label */
#accordion input[type="radio"]:checked ~ .content {
  max-height: 1000px;
}

#accordion label:hover {
  color: #ffffff;
  background-color: #0062cc;
  transition: ease all 0.35s;
  font-size: 2rem;
  border: 2px solid white;
}

#accordion .tab-close {
  width: 35%;
}

#accordion label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  /* 添加过渡到初始状态，保证旋转动画平滑 */
  transition: transform 1s;
}

/* 修改：现在input在label前面，用相邻兄弟选择器+直接选中 */
#accordion input[type="radio"]:checked + label::after {
  transform: rotate(90deg);
}

效果说明 #

调整后，点击label时，关联的input会被选中，通过 input:checked + label::after 可以直接控制伪元素的旋转，同时 .content 的展开逻辑也能正常工作。

内容的提问来源于stack exchange，提问作者Roelou