疑似要素とCSSクリッププロパティを使用したアイコンのレイアウト

見出しの隣にある、またはカスタムリストマーカーとして配置されたアイコンをタイプセットする良い方法は、擬似要素を使用することです。



私はこれを追加のマークアップの助けを借りて使用していました。たとえば、<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の例