How to style <details> and <summary>?

user_1523934 0
Viewed 97

Just found out about and tags. Default gives out a very crude style. I had success using the ::marker Pseudo Element to remove the default marker, but don't know how to put it on the right side. Used the ::after Pseudo Element but can't animate it (Rotate 180deg or scale it) when the summary "opens". Is there a proper way to do it? Or did I miss anything with my method? Thanks.

PS: Since I am a newb, I don't know how to get the Google icon font to the codepen. However, you will see what I tried to do with the expand_arrow icon.

* {
  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

markers pseudo-element css
1 Answers

The problem is that you can't apply transforms to elements with display: inline.

So add display: inline-block; to your .question-title

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