html - How to integrate small image into text -
i highlight 1 word of text within website a) special font , b) small image "around" word. here example:
what best way realize this? work different browsers / window sizes?
wrap word span. use pseudo element background image.
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> <span class="background"><span class="content">special</span></span> </h1>
Comments
Post a Comment