html - 纯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 解决方案。 谢谢。

附言这是my bad solution @ jsFiddle

应该是这样的:

Answer 1

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

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

font-style: normal;

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