JSFiddle - React, Tailwind, and code Playground

by thirdender

HTML

<div>
    <a href="#">
        Test!
    </a>
</div>

CSS

a {
    display: inline-block;
    background: #e5e5e5;
    position: relative;
    padding: 1em;
}
a:before, a:after {
    content: '';
    position: absolute;
    top: .4em;
    bottom: .4em;
    width: 0;
}
a:before {
    left: 2px;
    border-left: 1px dotted #333;
}
a:after {
    right: 2px;
    border-right: 1px dotted #333;
}
div:hover a:before, div:hover a:after {
    display: none;
}