dmoz
dmoz

Reputation: 1275

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

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?

Upvotes: 0

Views: 1143

Answers (2)

Joseph Marikle
Joseph Marikle

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

U r s u s
U r s u s

Reputation: 6988

Adding float:left to pseudo element will do it.

Check updated demo

Upvotes: 3

Related Questions