When using the Details and Summary elements I needed to hide the arrow, instead displaying an icon to the right. It should look like this:
MDN’s Details article provides CSS to hide the toggle arrow, making that part straight forward. To display the icon, I opted for a pseudo-element (::after). To position everything, display: flex. The CSS looked like this:
content: " ";
This went smoothly. The end.
OK, not quite. Most browsers behaved as expected. IE/Edge without support for Details display as if they were divs. Chrome and Firefox matched the design and then I tested Safari (12.1).
Interesting. The icon sits as if clearing Summary. Debugging commenced but it wasn’t until applying the same styling to a div that it helped me realise the issue. Here’s that same styling applied to a div displayed in Safari:
Everything is as intended. What’s happening? My best guess is Safari’s Shadow DOM has something that other browsers don’t.
Turning again to MDN docs we see that Summary can parent Phrasing content, which includes span. If we wrap the contents of the summary and apply the styles to the span, it displays as intended.
You could float or absolute position the pseudo-element. This works without introducing markup. The downside: the pseudo-element is no longer in the document flow, which could make it difficult to position and contain.
Depending on your circumstances a background image could work and you position it that way.
Here’s a CodePen that shows the different combinations. Best viewed in Safari.
For my needs, I’m happy to absorb extra markup. It’s valid HTML structure and provides greater flexibility.
A quick search of WebKits bugs didn’t surface anything and I’m not sure if this is a bug. If you find yourself stuck in a similar way then I hope this is helpful. If you have more information on why this is the case, please share.