pure css solution to add some text

Question

I'm trying to add text in this structure with pure css:

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

so it would look like

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

on the page. The jsFiddle example contains this css style:

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;
}

My bad solution is to add:

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

but it doesn't put the text "Hello, " where I actually want and the style from i applied. So, is there any way to add Hello, right in front of another text with the same style?

Please only css solution. Thank you.

P.S. And here is my bad solution @ jsFiddle

It should be like this:

Answer 1

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

Is this how you want it? Your first fiddle doesn't help a lot - is the text meant to overlap the pencil image? Anyway, you can style the pseudo-element itself to have the green border, and remove the browser default styling from the tags which is usually italic, using:

font-style: normal;

It's not considered semantic to use the tag either in this case, just a thought...