Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?
Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.
Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:
details summary::-webkit-details-marker {
background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
color: transparent;
font-size: 2.1rem;
font-weight: bold;
}
details[open] summary::-webkit-details-marker,
details[open] summary::marker {
background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
color: transparent;
font-size: 2.1rem;
font-weight: bold;
}
Oder geht dies NUR mit einem ::after pseudo.element.
Könnt ihr mir es bitte mal zeigen?
<summary>Menü</summary>
<ul>
<li><a href="">Impressum & rechtliches</a></li>
<li><a href="">Website Erika Mustermann</a></li>
<li><a href="">Blog Max Mustermann</a></li>
<li><a href="">Blog Erika Mustermann</a></li>
</ul>
</details>
Zusätzlich zu diesem Sandwich-Button würde ich in kleiner
Schrift unter dem Botton dann noch Menü stehen haben.
Könnt ihr mir bitte helfen?