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

Rotating a span in CSS within another element

所以我有一个箭头，当单击包含它的元素时，它会随着 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 元素内再次旋转。

要使 h3 保持在同一行：

h3 {
    display:inline;
}