1

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.

2 respuestas 2

3

El problema es que realmente no estás haciendo click en el link ya que el after y el before lo "tapan". Una solución sería utilizar el z-index:

.inner-block::before, .inner-block::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  border: 5px solid transparent;
  width: 0;
  height: 0;
  z-index: -1;
}
1
  • Muchas gracias. Funciona!
    – Britba
    Commented el 18 ene. 2018 a las 12:04
1

Otra solución, es que declares que los "seudos" no van a ser clickqueables, usando pointer-events: none. Ej:

.inner-block::before, 
.inner-block::after{
  pointer-events: none;
}

.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;  
  pointer-events: none; /*<-- solo agrega esto*/
}

.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;
  }
}

/*Esto de abajo ignoralo*/

body{display:flex; justify-content: center; align-items: center; min-height: 80vh;
}.inner-block{padding:1em;}
<div class="inner-block">
  <header>
    <a href="#">Título</a>
  </header>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.