JSFiddle - React, Tailwind, and code Playground

by Balkanlii

HTML

<a class="infolink" href="#">a link</a>

CSS

.infolink::before
{
    content: '!';
    font-size: 1.5em;
    font-family: sans-serif;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    line-height:1;
    display: inline-block;
    width: 1.8ex;
    height: 1.8ex;
    border-radius: 1.8ex;
    color: blue;
    background: white;
    border: thin solid blue;
}

.infolink:hover::before
{
    color: white;
    background: blue;
    border-color: white;
}