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:

enter image description here

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

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -