小さな画像をテキストに統合する方法

Question

ウェブサイト内のある単語をa）特殊なフォントで強調表示し、b）小さな画像を単語の周りに強調したいと思います。ここでは例：

これを実現する最良の方法は何ですか？さまざまなブラウザ/ウィンドウサイズで動作するように

Answer 1

単語をスパンにラップします。背景画像とともに擬似要素を使用する。

body { 
 
background: white; 
 
} 
 

 
h1 { 
 
    margin-top: 50px; 
 
} 
 

 
span { 
 
position: relative; 
 
} 
 

 
.background { 
 
    color: red; 
 
} 
 

 
.background:before { 
 
content:''; 
 
position: absolute; 
 
right: 0; 
 
top: -25px; 
 
width: 100%; 
 
height: 35px; 
 
background: url(http://redhatsociety.com/sites/all/themes/red_hat_society/images/funstuff/hearts.png) no-repeat right top; 
 
}

<h1> 
 
    Everyone is <span class="background"><span class="content">special</span></span> 
 
    </h1>