JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Link text</a>

CSS

a{
    display:inline-block;
    padding:15px;
    position:relative;
    color:#000;
    text-decoration:none;
}
a:before,
a:after{
    content:'';
    position:absolute;
    top:0;
    width:50%;
    height:100%
}
a:before{
    border: 2px solid red;
    border-right:none;
    left:0;
}
a:after{
    border: 2px solid blue;
    border-left:none;
    right:0;
}