CSS ::details-content: style the disclosure body while keeping native behavior

When to use it

An incident policy note places the rule name in summary and the explanation below it. Give the details element a border and padding that work in every target browser; enhance the expanded body with a top rule and spacing through ::details-content. The same information remains readable if that pseudo-element is ignored. Test closed and open states, keyboard activation, a long linked paragraph, 200% zoom, and printing. Avoid animating height without checking the collapsed content visibility behavior and reduced-motion preference. The sample uses no animation because the policy text must be available immediately. If the disclosure is critical to completing a form, do not hide a required instruction in it and assume every user will open it. Keep the summary text descriptive. A custom content surface is cosmetic; the HTML owns the relationship between summary and explanation.

.policy-note { border: 1px solid #708891; border-radius: .35rem; padding: .75rem; color: #173441; }
.policy-note > summary { font-weight: 700; cursor: pointer; }
.policy-note::details-content { margin-block-start: .65rem; padding-block-start: .65rem; border-block-start: 1px solid #a8b7bd; }

Cost and verification

The rule is inexpensive, though an animated expansion could trigger repeated layout work. Here the main cost is compatibility: older browsers may ignore ::details-content, so the outer details border and ordinary text spacing must still work. Inspect the real summary marker; removing it without an equivalent cue weakens the control. A printed copy should not omit essential closed content, so review print behavior independently of screen appearance. Styling the pseudo-element does not change native focus behavior or make content outside the details part of its accessible name. Check the target browser matrix before relying on the added divider.

Common Mistakes

• Do not assume ::details-content works in older browsers.
• Do not remove the summary marker without a clear replacement cue.
• Do not hide required instructions in a disclosure by default.

Connected lessons

• CSS Property Decisions
• CSS :open: style the native open state without inventing one
• CSS discrete transitions: keep a closing panel visible long enough to fade
• HTML details and dialog: distinguish disclosure from a modal task
• HTML details name groups: open one disclosure at a time