Currently, I am trying to position the flippy triangle to the right of the <summary> element when using the <details> tag.
Instead of the default alignment like this:
▶ My Cool List (aligned to the left)
I would like it to be like this:
My Cool list ▶ (aligned to the right)
Here is how it appears in Chrome:
https://i.sstatic.net/3IhmF.png
This post was helpful in writing the CSS that works on both Chrome and Firefox:
// Align all summaries to the right.
details > summary {
list-style: none; // Remove the default arrow.
display: flex;
align-items: center; // Vertically center the arrow.
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content: '▶';
}
details[open] > summary::after {
content: "▼";
}
However, Safari displays the flippy triangle on a new line when tested on Mojave desktop, iOS14, and iOS12:
My Cool List
▶
View the issue in Safari here:
https://i.sstatic.net/QgOEd.png
So, my question is, how can I make Safari show the flippy triangle on the same line as Firefox and Chrome? It seems like the problem arises from the combination of using display: flex with the ::after pseudo-element, but as someone unfamiliar with frontend development, I am unsure how to resolve this.