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

Question

我正在尝试使用纯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, ";
}

但它没有把文字“Hello”，我真正想要的地方和i的样式应用。 那么，有没有办法在同一个样式的另一个文本前面添加Hello,？

请仅限css解决方案。 谢谢。

P.S。这是my bad solution @ jsFiddle

它应该是这样的：

Answer 1

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

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

font-style: normal;

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