Beispiel:HTML details-3.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:SELFHTML-Beispiel-Grundlayout.css">  
<style>
details {
  border: 1px solid gainsboro;
  grid-column: 2 / 3;
  transition: all .5s;
}

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

summary::marker, summary::-webkit-details-marker {
  color: transparent;
}

summary::after {
  position: absolute;
  top: 0;
  right: 1em;
  content: '+';
  font-size: 2em;
  font-weight: bold; 
  color: green;
  transition: transform .2s;
}

details[open] summary::after { 
  transform: rotate(45deg);
  color: red;
} 

details[open] summary {
  background: rgb(255, 235, 230);
}

details p {
  padding: .5em;
}

body {
  max-width: 50em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1em;
  align-items: start;
}
	
h1 {
  grid-column: 1 / -1;
}
  </style>
  <title>details - 3</title> 
</head> 

<body> 
<h1>details mit eigenem Marker</h1>

<p>
  Der details-marker wird ausgeblendet. Stattdessen setzt ein Pseudoelement den Marker an einer beliebigen Position. Sie lassen sich sogar animieren!
</p>

<details> 
   <summary>
        Klick mich:
   </summary>
   <p>
        Dieses Beispiel funktioniert in allen modernen Browsern.<br>
        Das Pseudoelement sitzt rechts des summary-Texts.<br>
        Bei einer Änderung des open-Attributs wird es (mit einem weichen Übergang) gedreht!
   </p>
</details> 

</body> 
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML_details-3.html&oldid=94332“