リストなどで頭の1文字を前に出す方法

リストなどで1行が長くなってしまうと、

｜※テキストテキスト
｜※テキストテキストテキストテキ
｜ストテキスト
｜※テキストテキストテキ

折り返されてこのようになってしまいます。
ですが、折り返されたあとは※ではなく文字の初め（テキストの"テ"）に
合わせたいということが殆どかと思います。

今まではpaddingと背景画像を使って再現していたのですが、
もっとずっと楽な方法があること知ったのでメモしておきます。

上の例がリストであるとして、ソースはこのようになっていると思います。

<ul>
<li>※テキストテキスト</li>
<li>※テキストテキストテキストテキストテキスト</li>
<li>※テキストテキストテキ</li>
</ul>

まず、この<li>タグに左paddingを指定します。
1文字分、と指定するのがいいと思いますが、崩れる場合もあるようなので
そのときはピクセルで。

padding-left:1em;　または　padding-left:12px;　など

これで一文字分、右にずれることになります。

｜　※テキストテキスト
｜　※テキストテキストテキストテ
｜　キストテキスト
｜　※テキストテキストテキ


次に、行の先頭だけ左にずらします。

タグにtext-indentを指定します。

text-indent:-1em;

これで頭だけ左にずれ、改行後の先頭はテキストに揃う形になります。

｜※テキストテキスト
｜※テキストテキストテキストテキ
｜　ストテキスト
｜※テキストテキストテキ


それにしても、text-indentなんてまさにこういう用途のために
用意されているようなクラスですよね・・
もしくは先頭1文字下げるとか。

普段、画像置き換えのために文字を吹っ飛ばすくらいしか
使っていなかったので、目から鱗な気分です。