かなり長い間、私は
：first-letter疑似
クラスを使用して2つの背景画像を1つの要素に割り当てています。 最も興味深いのは、
first-letterであり、6th Internet Explorerで動作する数少ない擬似クラスの1つです。 ただし、知っておく必要がある小さなトリックが1つあります。
ビジネスに。 上記のように、1つのHTML要素があります。 それを第1レベルの見出しにします。
<h1>私たちについて</ h1>
基本的なスタイル、背景色、背景画像（右側の星）を設定します。
h1 {
ボーダートップ：1pxソリッド＃094eaa;
border-bottom：1px solid＃094eaa;
背景：＃002261 url（/images/stars.jpg）右中央の繰り返しなし。
} すべてがいつも通りです。 ただし、左にアスタリスクを追加する必要があります。 これは次のように行われます。
h1：最初の文字{
背景：url（/images/star.jpg）左中央に繰り返しなし;
パディング：7px 0 6px 30px;
} ここで最も重要な点は、疑似
クラス自体の間に
必ずスペースを入れる必要があることです
。最初の文字と開き中括弧。そうしないと、IE6で疑似クラスが機能しません。
h1：最初の文字{/ *動作しません* /
プロパティ：値;
}
h1：最初の文字{/ *これは、中括弧の前にスペースがあるため機能します* /
プロパティ：値;
} もう1つポイントがあります。 複数の要素に同じスタイルを指定する必要があり、そのうちの1つが擬似クラスの最初の文字である場合、要素をリストするときにコンマの前に必ずスペースを挿入する必要があります。 それは：
h1：最初の文字、.someclass {/ *動作しません* /
プロパティ：値;
}
h1：最初の文字、.someclass {/ *カンマの前にスペースがあるため、動作します* /
プロパティ：値;
} それは基本的にそれです。 背景画像の高さがフォントよりも大きく、テキスト自体の下にならないように、パディングが必要です。
オリジナルは私のブログにあります。