css - 如何设置<details>和<summary>的样式？

Question

刚刚发现和标签。默认 给出了非常粗糙的样式。我成功使用 ::marker 伪元素 删除默认标记，但不知道如何将其放在右侧。使用了 ::after 伪元素，但当摘要“打开”时无法为其设置动画(旋转 180 度或缩放)。有正确的方法吗？或者我的方法错过了什么？谢谢。

PS:由于我是新手，我不知道如何将Google图标字体获取到codepen。不过，您将看到我尝试对 Expand_arrow 图标执行的操作。

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.thing {
  background-color: cadetblue;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.new_game {
  font-size: 3rem;
}

.what_is_question {
  background-color: cornflowerblue;
  cursor: pointer;
}

.what_is_question[open] {
  background-color: darkmagenta;
}

.what_is_question {
  font-size: 5rem;
}

.question_title {
  position: relative;
}

.question_title::after {
  content: url(./images/expand_more_black_24dp.svg);
}

.what_is_question[open] .question_title::after {
  transform: rotate(180deg);
}

.question_title::marker {
  content: none;
}

.answer {
  background-color: darkkhaki;
  font-size: 3rem;
  padding-left: 3.5%;
}

<div class="thing">
  <h1 class="new_game">QnA</h1>
  <details class="what_is_question">
    <summary class="question_title">What is the question?</summary>
    <p class="answer">The question is the answer.</p>
  </details>
</div>

https://codepen.io/consig1iere/pen/bGWXRMW

Answer 1

问题是您无法将 transforms 应用于具有 display: inline 的元素。

因此，将 display: inline-block; 添加到您的 .question-title

.what_is_question[open] .question_title::after {
  display: inline-block;
  transform: rotate(180deg);
}