Question

I’m trying to do something a bit different with subheaders whereby the text looks a bit messy. I don’t want to change the markup to have <br/>s and other elements.

I want to know if anyone has a neat idea of how this might be done purely in css. Have a look at the image:

So in this example we have sort of… odd gutters & margins on both left and right.

I’m wondering about if this is even possible. Again, I’d rather not change a straightforward markup ie.:

<h2>The quick brown fox jumps over the lazy dog.</h2>

Answer 1

Without changing the original markup, I got as far as this: jsFiddle

h2 {
 width:10em; text-indent:-2em; margin-left:1em;
}
h2:before {
 display:block; content:''; float:left; width:1em; height:2em;
}