JSFiddle - React, Tailwind, and code Playground

by korigan

HTML

<p class="loupe"><a href="#">Lorem ipsum</a></p>

CSS

.loupe a {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
  padding-left: 20px;
  color: #000;
}
.loupe a:hover,
.loupe a:focus {
  background: url("data:image/svg+xml;utf8,<svg fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
    text-decoration: none;
    color: red;
}