CSS- 在（任何）html 文本中的某些单词上方注入和对齐图像而不破坏文本流

Question

我的目标是在基本上任何页面中动态（使用内容脚本）在文本上方注入图像，并保持文本正常对齐。我注入图像以使其具有特定属性的跨度，并且我的脚本（chrome 扩展的内容脚本）将跨度与另一个跨度（我 css 中的父项）包装在一起，该跨度具有 img（包装在自己的跨度）也是如此。问题（CSS 问题）是当我注入图像时，文本的文本内衬被破坏了。您可以在https://jsfiddle.net/wyfumrx6/2/ 中更清楚地看到这一切“a Good”这个词没有与文本的其余部分放在一起。这是我现在所做的，使用 inline-flex 和 flex-direction：HTML 示例：<a href="https://www.wikihow.com/Make-a-Good-Cup-of-Tea" style="/* line-height: 57px; *//* height: auto; */font-size: 150%;font-family: Gotham, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;/* height: 55px; *//* display: inline-flex; */">  <span id="div0" class="aui_top_in_page_parent" tabindex="0" style="">        <span id="span0" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/1/12313.png"                class="aui_header_images"></span>  <span aui-symbol="14907" aria-describedby="span0" accesskey="Shift + E">How        </span>  </span>  <span id="div5" class="aui_top_in_page_parent" tabindex="0">        <span id="span5" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/7/7194.png"                class="aui_header_images"></span>  <span aui-symbol="17982" aria-describedby="span5" accesskey="Shift + E">to</span></span> <span id="div6" class="aui_top_in_page_parent" tabindex="0"><span id="span6" class="aui_top_in_page"><img src="http://www.arasaac.org/repositorio/thumbs/10/50/3/32751.png"                class="aui_header_images"></span><span aui-symbol="15410" aria-describedby="span6" accesskey="Shift + E">Make</span></span>  a Good <span id="div7" class="aui_top_in_page_parent" tabindex="0"><span id="span7" class="aui_top_in_page"><img                src="http://www.arasaac.org/repositorio/thumbs/10/50/2/2429.png" class="aui_header_images"></span><span aui-symbol="13621 12324 17511" aria-describedby="span7" accesskey="Shift + E">Cup of Tea</span></span></a>在这里可以清楚地看到结果：https : //jsfiddle.net/wyfumrx6/我希望线条和文字在图像位于“标记”字词上方时保持直线，并且该图像与上面的文本行有足够的边距，以便清楚 img 指的是哪个字。