css - 如何风格和?

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

标签： csspseudo-elementmarkers

Answer 1

问题是您不能应用于transforms带有display: inline.

所以添加display: inline-block;到你的.question-title

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