タイトル前後に簡単に画像をかますCSSハック

タイトル前後に簡単に画像をかますCSSハック

タイトル前後に画像を噛ますことは可能か

H1〜H6などのタイトル要素の前後に画像をかまして、オシャレでエレガントなスタイルにすることは可能なのか。

色々調査した所、専用のCSSやプロパティはないものの、擬似的に画像を噛ますことは可能のようです。

BeforeAfterを使う

まずは真ん中のスタイル。h3を使い、クラス名は「kamasu」とでもしておく。

h3.kamasu{
font-style: italic;
color: #d40c73;
font-size: 2.5rem;
text-align: center;
padding-bottom: .5em;
background: url(画像パス) no-repeat center bottom !important;
}

そして「::before」「::after」要素の「content」プロパティに画像パスを入れることが出来る。

h3.elegant::before {
content: url(画像パス);
position: relative;
top: 0.25em;
margin-right: 0.5em;
}
h3.elegant::after {
content: url(画像パス);
position: relative;
top: 0.25em;
margin-left: 0.5em;
}

結果

結果、前後に画像を噛ますことが出来た。まさかのcontentプロパティに画像パスを指定できるとは思わなかったので、便利。

むりやりSPANなどで配置する必要もなく、今後利用頻度は上がりそうだ。

HTMLコーディングカテゴリの最新記事