<details class="one">
  <summary>Information <time>10/19/2021</time></summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis rem aperiam quas deleniti vero.</p>
</details>

<details class="two">
  <summary>Pizza Toggle <time>10/19/2021</time></summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis rem aperiam quas deleniti vero.</p>
</details>

<details class="three">
  <summary>
    <div>Colorized default ::marker <time>10/19/2021</time></div>
  </summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis rem aperiam quas deleniti vero.</p>
</details>

<details class="four">
  <summary>Pointer cursor? <time>10/19/2021</time></summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis rem aperiam quas deleniti vero.</p>
</details>
.two {
  summary {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    time {
      margin-left: auto;
    }
    // display: grid;
    &::before {
      content: "🍕";
      display: inline-block;
      transform-origin: center center;
      transition: 0.2s;
      transform: rotate(-69deg);
    }
  }
  &[open] summary::before {
    transform: rotate(22deg);
  }
}

.three {
  summary {
    position: relative;
    &::marker {
      color: hotpink;
    }
    > div {
      position: absolute;
      top: 0;
      left: 1rem;
    }
  }
}

.four {
  summary {
    cursor: pointer;
  }
}

html {
  font: 110%/1.4 system-ui;
  background: radial-gradient(circle at bottom right, #ccc, #999);
  min-height: 100vh;
}
details {
  background: #333;
  color: white;
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 3px;
  p {
    margin: 0.5rem 0 0.5rem 1rem;
    font-size: 0.75rem;
    opacity: 0.75;
  }
}
time {
  font-size: 0.75rem;
  letter-spacing: 1px;
  opacity: 0.66;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.