HTML - Details with custom marker styling

details.css

details {
  border: 0;

  summary {
    position: relative;
    cursor: pointer;
    padding: 0;
  }

  summary > * {
    display: inline-block;
  }

  summary::marker {
    content: none;
  }

  &[open] summary i {
    transform: rotate(45deg);
  }
}

details.html.twig

{%
  set classes = [
    'node',
    'node--type-' ~ node.bundle|clean_class,
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
  ]
%}

{% set title_attributes = title_attributes ?? create_attribute() %}
{% set content_attributes = content_attributes ?? create_attribute() %}

<details{{ attributes.addClass(classes) }}>
  <summary{{ title_attributes.addClass('d-flex', 'flex-nowrap', 'align-items-center', 'justify-content-between', 'py-1') }}>
    <strong>{{ node.label() }}</strong>
    <i aria-hidden="true" class="icon-cross"></i>
  </summary>
  <div{{ content_attributes.addClass('container', 'p-2') }}>
    {{ content }}
  </div>
</details>