JSFiddle - React, Tailwind, and code Playground

by qfox

HTML

<p><a class="link" href="/unvisited"><svg class="link__flag-wrapper"><polygon class="link__flag" points="0,19.20 0,0 12.00,0 12.00,19.20 6.00,13.57 "/></svg>Unvisited link</a></p>

<p><a class="link" href="http://jsfiddle.net/"><svg class="link__flag-wrapper"><polygon class="link__flag" points="0,19.20 0,0 12.00,0 12.00,19.20 6.00,13.57 "/></svg>Visited Link</a></p>

<p>Текст <a class="link2" href="http://jsfiddle.net/"><i class="link2__flag"></i>Visited Link</a>, еще какой-то <a class="link2" href="/unvisited"><i class="link2__flag"></i>Unvisited Link</a> текст.</p>

CSS

/* v1 */
 .link {
    display:inline-block;
    overflow:hidden;
    text-align:center;
}
.link__flag-wrapper {
    padding:2px;
    width:12px;
    height:20px;
    display:inline-block;
    vertical-align:middle;
}
.link, .link__flag {
    color:red;
    fill:red;
}
.link:visited, .link:visited .link__flag {
    color:gray;
    fill:gray;
}
/* v2 */
 .link2 {
    display: inline-block;
    text-align: center;
    color: red;
}
.link2__flag {
    display:inline-flex;
    /* ? */
    box-sizing:border-box;
    width:11.5px;
    height:20px;
    border-style:solid;
    border-width:0 6px 5px 6px;
    border-color:red;
    border-bottom-color:transparent !important;
    margin-right:2px;
}
.link2:visited {
    color: gray;
}
.link2:visited .link2__flag {
    border-color:gray;
}