注釈を入れるときに美しく見せるためのCSSテクニック | [旧] WEB向上中

[旧] WEB向上中

webデザイナーとして日々奮闘する中、色々と忘れず頑張っていければと、web周りの技術や情報をメモっています。

文中に(※)マークを入れて注意文を入れたりしますが、その際にCSSでの記述についてです。
例えば
<p class="caution">※注意文の内容なのです。</p>
という文があたっとして、
これがもし2行に渡った場合

※注意文の内容
なのです。

となってしまい、自動改行された際に「な」が左にピッタリくっついてしまいます。

そこでcssファイルに
p.caution {
margin-left: 1em;
text-indent: -1em;
}
とすると

※注意文の内容
なのです。

きれいに一文字空いてくれます。

地味ですが見た目的にも良くなりますし、意外と使い道多いです。
※インライン要素にはうまく作用しませんので、注意してください。