Getting H1 text to wrap beside a ::before pseudo element

Question

I have a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:

1. A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
   • I have this done successfully.
2. The text to wrap normally and align with the left side of the first word.
   • This is where the problem is.

See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv

Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?

Answer 1

Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to

http://codepen.io/anon/pen/MYJNEp

Like so:

.site-title a:before {
    ...
    float:left;
}

Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)

Answer 2

Adding float:left to pseudo element will do it.

Check updated demo