Tengo un div que tiene tanto un before como un after con content: '' para poder animar el borde de este. Pero me encuentro que al poner un link, este no funciona. Ahi va lo que tengo hecho:
.inner-block {
overflow: hidden;
position: relative;
width: 90%;
height: 90%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.inner-block::before, .inner-block::after {
content: '';
box-sizing: border-box;
position: absolute;
border: 5px solid transparent;
width: 0;
height: 0;
}
.inner-block::before {
top: 0;
left: 0;
border-top-color: #000;
border-right-color: #000;
animation: border 2s normal forwards;
}
.inner-block::after {
bottom: 0;
right: 0;
animation: border 2s 1s normal forwards, borderColor 2s 1s normal forwards;
}
@keyframes border {
0% {
width: 0;
height: 0;
}
25% {
width: 100%;
height: 0;
}
50% {
width: 100%;
height: 100%;
}
100% {
width: 100%;
height: 100%;
}
}
@keyframes borderColor {
0% {
border-bottom-color: #000;
border-left-color: #000;
}
50% {
border-bottom-color: #000;
border-left-color: #000;
}
51% {
border-bottom-color: #000;
border-left-color: #000;
}
100% {
border-bottom-color: #000;
border-left-color: #000;
}
}
<div class="inner-block">
<header>
<a href="#">Título</a>
</header>
</div>
Supongo que al tener content: '' es lógico, pero no se como puedo solucionarlo.
Gracias.