CSS tweak for open braces effect on HTML links

brace-effect

/*****************************************************************************/
/* Links
/*****************************************************************************/
a {
    color: black !important;
    text-decoration: none !important;
    cursor: pointer;
}
.post a {
    border-bottom: 1px dotted #b3b3b1;
}

a:hover,
a:visited,
a:focus {
    color: black !important;
    text-decoration: none !important;
}
.page-preview-title::before,
.page-preview-title::after,
.leaders a::before,
.leaders a::after,
.footer a::before,
.footer a::after,
.post-li a::before,
.post-li a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}
.page-preview-title::before,
.leaders a::before,
.footer a::before,
.post-li a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}
.page-preview-title::after,
.leaders a::after,
.footer a::after,
.post-li a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}
.page-preview-title:hover::before,
.page-preview-title:hover::after,
.page-preview-title:focus::before,
.page-preview-title:focus::after,
.leaders a:hover::before,
.leaders a:hover::after,
.leaders a:focus::before,
.leaders a:focus::after,
.footer a:hover::before,
.footer a:hover::after,
.footer a:focus::before,
.footer a:focus::after,
.post-li a:hover::before,
.post-li a:hover::after,
.post-li a:focus::before,
.post-li a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}