在另一个元素内旋转 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. 将跨度移回元素外，但强制 h3 保持在同一行。
2. 让跨度在 h3 元素内再次旋转。

Answer 1

要使 h3 保持在同一行：

h3 {
    display:inline;
}