demo · v131

Style <details> with ::details-content

The new ::details-content pseudo gives you direct access to the expanded content box of a <details> element. Adjust the controls to restyle it live.

What changed in Chrome 131? <details> got a proper named pseudo (::details-content) and an addressable structure so its expanded box can be styled without hacks.
Open this one to see the live styling The pseudo-element below this summary is the ::details-content box. Background, padding, and radius are all set from JavaScript-generated CSS. 


  


  

    
the css


details::details-content {
  padding: 1rem;
  background: #f4f3ee;
  border-radius: 0;
  transition: all 0.3s ease;
}

  


  

    
see also