Link does not work because it is inside two pseudoclasses with content: ''

Question

Link does not work because it is inside two pseudoclasses with content: ''

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I have a div that has both a before and an after with content: '' to be able to animate the edge of this. But I find that by putting a link, this does not work. There goes what I have done:

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

I suppose that having content: '' is logical, but I do not know how I can solve it.

Thank you.

html css

asked by Britba 18.01.2018 в 11:50

source

2 answers

1

Another solution is to declare that "pseudos" will not be clickable, using pointer-events: none . Ex:

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

answered by 18.01.2018 в 16:21

sort images in database Remove elements from an array in php

score 3 · Accepted Answer

The problem is that you are not really clicking on the link since the after and the before "clog it up". One solution would be to use the 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;
}