CSS/Javascript 将单词与特定字符对齐

我如何使用 CSS/Javascript 将 html 中的单词与该单词中的任意字符对齐，更改对齐字符的样式（例如使其粗体）以与其他字符形成对比，如本例中所示，对齐和粗体“k”、“e”、“t”和“f”：

-stack
---overflow
----stack
-overflow

编辑：理想情况下，我希望能够以非等宽字体来执行此操作。

最简单的方法是使用两列表，其中每一行包含一行文本，第二个单元格以所需字符开头，该字符包装在文本级容器中。然后，您只需设置该容器的样式并右对齐第一列。例子：

<style>
.aw { border-collapse: collapse; } /* remove cell spacing */
.aw td { padding: 0; }             /* remove cell padding */
.aw td:first-child { text-align: right; }
.aw b { font-weight: bold; color: red; }
</style>
<table class=aw>
<tr><td>stac<td><b>k</b>
<tr><td>ov<td><b>e</b>rflow
<tr><td>s<td><b>t</b>ack
<tr><td>over<td><b>f</b>low
</table>

如果您使用:first-letter伪元素。但是，如果元素中的第一个字符实际上不是字母，而是例如，则该伪元素将无法一致地工作。标点符号或数字。