Reputation: 1275
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:
::before
element on an a
link inside of an H1 (it needs to be clickable, so can't be on the H1).
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?
Upvotes: 0
Views: 1143
Reputation: 78590
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)
Upvotes: 1