Indentation and inline elements
The
text-indent
property specifies the indentation of the first line of text in a block container.
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>Important!</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. I’m not sure how useful this might be, but we never know 🙂