Indentation and inline elements
This article was first published on css-101.org (03-03-2012).
The
text-indent
property specifies the indentation of the first line of text in a block container.
http://www.w3.org/TR/CSS2/text.html#indentation-prop
This means that applying text-indent
on a link or any other inline element will not do anything (see 16.1 Indentation: the ‘text-indent’ property).
How to mimic indentation when text-indent is not an option?
In modern browsers, authors can use pseudo-elements to pull content out of boxes - and not only horizontally!
Examples
The following examples use the markup below:
<p>
<strong>Important!</strong>
</p>
indentation: -50px
CSS
strong:before {
content:"";
margin-left:-50px;
}
Result
Important!
indentation: +50px
CSS
strong:before {
content:"";
margin-right:50px;
}
Result
Important!
So what?
I hear you. You must be thinking, what’s the big deal since we could achieve the same results using text-indent
on the parent container or even moving the strong
element (via float
, margin
, etc). But check this out…
The next example uses the markup below:
<p>
<strong>Important!</strong>
</p>
elevation”: -50px
CSS
p {
padding-left:400px;
}
p:before {
content:"";
display:block;
margin-top:-60px;
}
Result
Important!
Yes, the text is outside the paragraph. And this is only because we have some top padding. If we didn’t have any padding at the top of the box then the whole box would move up with the strong
element.
I’m not sure how useful this might be, but we never know 🙂