字体上方显示拼音

嘿，朋友！我最近在搞一个网页，想在上面的文字旁边显示拼音，但是有点懵，不知道怎么操作。我记得以前看过一些网页，字体上方有拼音注释，但是具体怎么做就有点模糊了。
我试过用HTML的^{标签，但是它只能把拼音放在文字的上方，但是位置不太对，看起来有点乱。然后我又想到了CSS，但是CSS调整位置感觉更复杂了。
比如，我之前在一个教育网站上看到，他们就是在每个汉字旁边用标签放拼音，但是那个网站是2009年的，那时候的代码可能和现在不太一样。
我还在想，是不是可以用CSS的伪元素来搞，但是这块我没碰过，不敢乱讲。你有没有什么好办法？或者你以前遇到过类似的问题吗？咱们聊聊看。}