I'm looking to adjust the placement of the arrow within details. I've experimented with using float:left, but when the line is too long, like in the example provided, the arrow shifts to the beginning of the line below when I resize the window. I want it to remain next to the very first letter on the first row.
Is there a way to achieve this?
For instance:
<details>
<summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
gravida iaculis arcu, et hendrerit arcu. Morbi rhoncus ex quam, quis.
</summary>
Content goes here.
</details>
<style>
summary::-webkit-details-marker {
display: none
}
summary:after {
content: "+";
color: #fff;
float: left;
}
details[open] summary:after {
content: "-";
}
</style>