CSS: Stop parent element flash when using pseudo elements - html

Question

I'm trying to create a basic hover transition using pseudo elements. The transition works fine, but the element "flashes" when it begins.
Any idea on how to get around the transition flash?
Issue recreated in a codepen.
I've tried using -webkit-backface-visibility to hidden to solve the issue. It stops the flash but it hides the ::before pseudo element from view.
html:
<a href="#">
<div class="cl">
<img src="http://placekitten.com/200/200" alt="" />
<span>meoww!</span>
</div>
</a>
CSS:
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
}
div {position:relative;}
span{
position:absolute;
left:0;
right: 0;
bottom:50%;
color: black;
text-align:center;
}
a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
a:hover, a:focus {
outline: none;
}
.cl {
padding: 0 20px;
line-height: 0;
}
.cl::before,
.cl::after {
position: absolute;
width: 45px;
height: 2px;
background: #fff;
content: '';
opacity: 0.2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl:hover::before,
.cl:hover::after,
.cl:focus::before,
.cl:focus::after {
opacity: 1;
}
.cl:hover::before,
.cl:focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%) translateY(75px);
-moz-transform: rotate(0deg) translateX(-50%) translateY(75px);
transform: rotate(0deg) translateX(-50%) translateY(75px);
}
.cl:hover::after,
.cl:focus::after {
right: 50%;
-webkit-transform: rotate(0deg) translateX(50%) translateY(-75px);
-moz-transform: rotate(0deg) translateX(50%) translateY(-75px);
transform: rotate(0deg) translateX(50%) translateY(-75px);
}

Answer 1

.cl {
-webkit-backface-visibility: hidden;
padding: 0 20px;
}
http://codepen.io/agconti/pen/xaqKm