0

собственно не знаю как сделать так чтобы 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;
}
kertAW
  • 2,443
Armen
  • 1,730

1 Answers1

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>
kertAW
  • 2,443
  • сделал по другому добавив 2 spam а в блок вместо border и воспользовался этим решением https://ru.stackoverflow.com/questions/293281/%D0%9A%D0%B0%D0%BA-%D0%BF%D1%80%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B8-%D0%BD%D0%B0-%D0%BE%D0%B4%D0%B8%D0%BD-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%BC%D0%B5%D0%BD%D1%8F%D1%82%D1%8C-%D1%81%D1%82%D0%B8%D0%BB%D0%B8-%D0%B4%D1%80%D1%83%D0%B3%D0%BE%D0%B3%D0%BE-%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0 но думаю добавить два спама чтобы получить ожидаемый результат не лучшее решение – Armen Jul 29 '20 at 03:32
  • 1
    @Armen, да нет, вполне нормальная практика, с псевдоэлементами так сделать все равно не получится – kertAW Jul 29 '20 at 08:26
  • спасибо целый день убил чтобы найти алтернативу) – Armen Jul 29 '20 at 14:19