Html 添加一些文本的纯css解决方案

我试图用纯css在这个结构中添加文本：

<div><i></i>world!</div>

我的错误解决方案是添加：

i:after {
content: "Hello, ";
}

但是它没有把文本“Hello”放在我真正想要的地方，也没有应用

I

中的样式。 那么，有没有办法将

Hello，

添加到另一个具有相同样式的文本前面

请仅使用css解决方案。 多谢各位

还有，这是

应该是这样的:

这是你想要的吗？你的第一把小提琴帮不了什么忙——文字是不是要与铅笔图像重叠？ 无论如何，您可以使用以下方法设置伪元素本身的样式，使其具有绿色边框，并从标记中删除浏览器默认样式（通常为斜体）：

font-style: normal;

---

在这种情况下，使用标记也不被认为是语义上的，只是一个想法…

为什么首先要添加CSS？CSS是为文档设计样式而发明的。不编辑文档。呵呵！屏幕阅读器无法使用CSS添加内容。这不是我的项目，需要这样的定制。CSS是我的最佳方式（如果有解决方案的话）。请评论。谢谢，谢谢你的回答。然而，我已经添加了图像，因为它必须看起来。对不起，当我开始提问时，我必须添加它。再次感谢你。老实说，我不明白你为什么要这么做——你为什么不在HTML中的“World”之前键入“Hello”？此外，您还有一个只包含背景图像的。如果你想让“Hello”部分是动态的，你就必须使用Javascript，然后最好用JS插入额外的单词。这是因为在我的例子中，css的定制更容易。

i:after {
content: "Hello, ";
}

font-style: normal;