CSS / Javascript以对齐特定字符上的单词

Question

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

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

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

Answer 1

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

<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伪元素，则可以省略文本级容器（示例中的'b'元素）。但是，如果元素中的第一个字符不是字母，而是例如字母，则该伪元素不能始终如一地工作。标点符号或数字。