псевдоэлемент before наследует hover родителя

Question

собственно не знаю как сделать так чтобы before не имел hover родителя

a:before{
    transition: all 2s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-45%);
    content: '';
    width: 30px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}
a:hover:before{
     padding: 38px 0;
     border-top: 2px solid $customTextColor;
     border-bottom: 2px solid $customTextColor;
}

Answer 1

Если только заменить псевдоэлемент на блок:

div {
  border: 2px dashed black;
  width: 300px;
  height: 300px;
  position: relative;
}

div span {
  content: 'before';
  border: 2px dashed red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 10px;
  right: 15px;
}

div span:hover {
  background-color: red;
}

<div class='div'>some text<span>span</span></div>

БЛОГ НА HUSL

псевдоэлемент before наследует hover родителя

Ответы (1 шт):