Summary that Looks like a Link (summary.u-summary-link > a)

[wesleyboar]

Goal

Add .u-summary-link (from Pre-Prod Digital Rocks) to Core-Styles.

Reference

Used on Project #317.

Content as of:

2025-02-21 17:27 CST

summary.u-summary-link {
    display: flex;
}
summary.u-summary-link::before {
    content: '▶';
}
summary.u-summary-link > a {
    flex: 1;
}
/* To undo core-styles, which assumes href-less <a> is disabled */
summary.u-summary-link > a:not([href]) {
    pointer-events: auto;
    opacity: 1;
}
details[open] > summary.u-summary-link::before {
    content: '▼';
}

UI

460.mov