css - 在另一个元素内旋转 CSS 中的跨度

Question

所以我有一个箭头，当单击包含它的元素时，它会通过 CSS 变换旋转。这很好用

<div><span class="arrow">&#x25BA;</span><h3>Some Text Goes Here</h3></div>

但是，我需要将箭头放在 h3 元素内，因为两者需要保持内联，如果父元素的宽度太小，h3 元素会向下环绕并结束在箭头下方而不是内联。

<div><h3><span class="arrow">&#x25BA;</span>Some Text Goes Here</h3></div>

当我这样做时，元素保持内联但箭头不再旋转。

有没有办法:

1. 将 span 移回元素之外，但强制 h3 保持在同一行。
2. 获取跨度以在 h3 元素内再次旋转。

Answer 1

要使 h3 保持在同一行:

h3 {
    display:inline;
}