Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nobis recusandae saepe, fugiat officia impedit assumenda ipsa repudiandae odio ducimus laboriosam, laudantium distinctio illo voluptatem tenetur beatae quo!
Fjern standardpil med ::marker, og tilføj dit eget ikon med ::after, og brug flexbox til at placere ikonet korrekt.
<section class="faq-section">
<h2>FAQ</h2>
<details open name="accordion">
<summary>Fold mig ud 1</summary>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nobis recusandae saepe, fugiat officia impedit assumenda ipsa repudiandae odio ducimus laboriosam, laudantium distinctio illo voluptatem tenetur beatae quo!</p>
</div>
</details>
<details name="accordion">
<summary>Fold mig ud 2</summary>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet doloremque quaerat ipsa voluptates temporibus a quibusdam facilis?</p>
</div>
</details>
</section>
Hints
summary::marker {
content: none;
}
summary {
display: flex;
align-items: center;
justify-content: space-between;
}
summary::after {
content: "+";
font-family: system-ui;
font-weight: 400;
font-size: 1.1rem;
}
:open summary::after {
content: "–";
}