添加一些文本的纯 CSS 解决方案答案

【问题标题】：pure css solution to add some text添加一些文本的纯 CSS 解决方案
【发布时间】：2014-04-01 16:16:15
【问题描述】：

我正在尝试使用纯 css 在此结构中添加文本：

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

所以它看起来像

<div><i></i>Hello, world!</div>

在页面上。 jsFiddle 示例包含此 css 样式：

div{
    border:1px solid red;
    margin-top:20px;
    margin-left:20px;

}
i {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url("http://png-.findicons.com/files/icons/1688/web_blog/48/pencil_small.png");
    border:1px solid green;
}

我不好的解决方案是添加：

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

但它并没有将文本“你好”放在我真正想要的位置，也没有应用 i 的样式。那么，有没有办法在另一个相同样式的文本前面添加Hello,？

请仅使用 css 解决方案。 谢谢。

附：这里是my bad solution @ jsFiddle

应该是这样的：

【问题讨论】：

为什么要先添加CSS？
CSS 被发明用来设置文档的样式。不编辑文档。嗯！
屏幕阅读器无法使用 CSS 添加内容。
这不是我的项目，需要这样的定制。在我的情况下，CSS 是最好的方法（如果存在解决方案）。
反对者请发表评论。谢谢。

标签： html css text tags

【解决方案1】：

http://jsfiddle.net/RbLRA/2/

这是你想要的吗？您的第一个小提琴没有太大帮助-文本是否要与铅笔图像重叠？无论如何，您可以将伪元素本身设置为具有绿色边框，并从通常为斜体的标签中删除浏览器默认样式，使用：

font-style: normal;

在这种情况下使用标签也不被视为语义，只是一个想法......

【讨论】：

感谢您的回答。但是，我已经添加了图像，因为它必须看起来。抱歉，我必须在打开问题时添加它。再次感谢您。
我不明白你为什么要这样做，老实说 - 你为什么不在 HTML 中的“World”之前输入“Hello”？此外，您有一个 ，其中只有一个背景图像。如果您希望“Hello”部分是动态的，那么无论如何您都必须使用 Javascript，然后最好用 JS 插入额外的单词。
那是因为在我的情况下自定义 css 更容易。