Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Beispiel:HTML details-Element2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">

<style> details { 

   border: thin solid gainsboro;
   grid-column: 2 / 3;
   height: min-content;
   transition: all .5s;

}

summary { 

   position: relative;  
   line-height: 300%;
   padding-left: 1em;

}

summary::-webkit-details-marker, summary::marker { 

 content:  " ↓ "; /* Verwendung des "Pfeil"-Symbols anstelle des Dreiecks */
 color: green;
 font-size: 2em;
 font-weight: bold;
 transition: all 0.5s;

}

details[open] summary { 

   background: rgb(255, 235, 230);
   }

details[open] summary::-webkit-details-marker, details[open] summary::marker { 

 content:  " ↑ "; 
 color: red;

}

details p { 

   padding: .5em;
   }

body { 

 max-width: 50em;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1em;

}

h1 { 

 grid-column: 1 / -1;

} 


 </style>
 <title>details - 2</title>

</head>

<body>

details-marker

Der details-marker wird über ::marker selektiert und erhält mit content einen neuen Inhalt.

<details> 

  <summary>
       Browser-Entwicklungen
  </summary>

Dieses Beispiel funktionierte im November 2020 noch nicht.
Chrome, Edge und Opera ignorierten das content-Attribut, positionierten das Marker-Dreieck dafür aber in den Summary-Text.
Eine Platzveränderung oder Transformation des Markers sind in der Spezifikation zur Zeit (März 2021) nicht vorgesehen.

</details>

</body> </html>

Abgerufen am 23.03.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML_details-Element2.html"