Details Summary button:active
 

Добрый день!
Подскажите, как настроить скрипт, чтобы помимо функции скрытия деталей, стрелка на кнопке меняла наклон? Аналогично работе summary. Через css не получается. Может быть лучше реализовать саму через ::before ::after?

<style>
summary {
  color: #3b393d;
}

.dclose {
  background-color: transparent;
  background-clip: padding-box;
  border: none;
  color: #333;
  line-height: 1.5;
  margin-top: .2em;
  margin-bottom: .2em;
  padding: .375rem .75rem;
}
</style>

<details id="details">
  <summary> open details</summary>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</details>

<button class="text-right dclose" onclick="closeDetails()"><span class="en" lang="en">▲ Close details</span></button>
<script>
  function closeDetails() {
    document.getElementById("details").open = false;
  }

</script>

<style>
summary {
  color: #3b393d;
}

.dclose {
  background-color: transparent;
  background-clip: padding-box;
  border: none;
  color: #333;
  line-height: 1.5;
  margin-top: .2em;
  margin-bottom: .2em;
  padding: .375rem .75rem;
  position: relative;
}

.dclose:before{
      content: "▲";
      display: block;
      position: absolute;
      left: 0px;
      top: 5px;
      transition: .8s;
}
[open] + .dclose:before{
    transform: rotate(90deg);
}
</style>

<details id="details">
  <summary> open details</summary>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
  Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах
  и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</details>

<button class="text-right dclose" onclick="closeDetails()"><span class="en" lang="en"> Close details</span></button>
<script>
  function closeDetails() {
    document.getElementById("details").open = false;
  }

</script>

рони,
как всегда, спасибо. Я в принципе так и подумал, что лучше через псевдо.

рони,
подскажите, а можно через js сделать, чтобы при разрешении меньше 991px детали были сложены? Даже если по умолчанию стоит <details open>

madeas,

function closeDetails() {
    document.getElementById("details").open = false;
  }

function closeResize() {
    document.documentElement.scrollWidth < 991 && closeDetails()

}

window.addEventListener('load', closeResize);
window.addEventListener('resize', closeResize);