如何将小图像整合到文本中

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>