見出しの隣にある、またはカスタムリストマーカーとして配置されたアイコンをタイプセットする良い方法は、擬似要素を使用することです。
私はこれを追加のマークアップの助けを借りて使用していました。たとえば、<i>タグは絶対に配置され、背景画像をアイコン付きのスプライトとして設定しました。
この方法では、追加のマークアップを回避できますが、8番目よりも若いIEの場合は、擬似要素を挿入する式を記述する必要があります。
だから見出しがあります：
< h1 id = "anchor-header" >ヘッダー< / h1 >
そして、彼の前に、スプライトからアイコンを配置します。
＃anchor-header {
位置 ： 相対 ;
padding-left ： 21px ;
background-image ： expression （ this .runtimeStyle .backgroundImage = "none" 、
this .innerHTML = '<img alt = "" src = "https://habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png">' + this.innerHTML ） ;
}
＃anchor-header ：before 、
＃anchor-header img {
内容 ： url （ habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png ） ;
位置 ： 絶対 ;
top ： 3px ;
クリップ ： rect （ 4px 15px 18px 0 ） ;
左 ： -14px 。
}
アイコンの付いたタイトルを取得します。
アイコンを背景にする方法と比較すると、次のような利点があります。
- 印刷時には、背景ではなく<img>を使用して設定されているため、アイコンが表示されます。
- 追加のhtmlマークアップは必要ありません。
Jsfiddleの例