Как не применять эффекты наведения к контенту, добавленному в: before? css

Question

Я добавляю '>' в свойство: before к ссылкам, но при применении эффекта: hover также используются стили text-decoration: underline;, поэтому мне нужно, чтобы они не применяли эффект в содержимом, добавленном в: before, Я попытался решить эту проблему с этими параметрами

a:before {
  content: '> ';
  position: relative;
  display: inline-block;
  margin-right: 5px;
  pointer-events: none;
}

a:before:hover {
  content: '>';
  pointer-events: none;
}

a:before:hover {
  text-decoration:none;
}

, но ни один не работает.

вот как ссылки ведут себя при наведении

.super {
    color: rgb(40, 40, 40);
    background-color: rgb(239, 239, 239);
    margin-bottom: 35px;
    padding: 10px;
}

p {
    position: relative;
    word-break: break-word;
    font-size: 17px;
    padding: 0px;
}

a {
    left: 0px;
    display: flex;
    position: relative;
    left: 0;
    display: flex;
    text-decoration: none;
}

a::before {
    content: '> ';
    position: relative;
    display: inline-block;
    margin-right: 5px;
  }
  
  
  a:hover{
    text-decoration:underline;
  }

<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>

Answer 1

В вашем коде есть 2 вещи, которые перестают работать, если не работают:

• Основная причина - использование display:flex
• у вас также есть неправильный порядок для :hover:before, но это не имеет значения, потому что он не будет работать с display:flex в любом случае.

При отображении по умолчанию для a элементов, подчеркивание текста не влияет на содержимое, добавленное с помощью псевдоэлемента :before. Однако использование display:flex изменяет способ отображения и приводит к добавлению подчеркивания текста к содержимому, добавленному в a:before , а также к тексту ссылки:

Работает пример :

ОБНОВЛЕНИЕ: для удовлетворения вашего нового нового требования к отступу на длинной ссылке и невозможности изменить HTML.

.super {
    color: rgb(40, 40, 40);
    background-color: rgb(239, 239, 239);
    margin-bottom: 35px;
    padding: 10px;
}

p {
    position: relative;
    word-break: break-word;
    font-size: 17px;
    padding: 0px;
}

a {
    position: relative;
    text-decoration: none;
    display: block;
    padding-left: 15px;
}

a:before {
    content: '>';
    position:absolute;
    left:0;
    top: 0;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

a:hover:before{
    text-decoration:none;
}

<div class='super'>
<p>
<a href='https://google.com' target='_blanck'><span>This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link</span></a>
</p>
</div>

Кроме того, к вашему сведению, правильным способом использования :hover и :before вместе является :hover:before, но в этом случае это не делает разница, когда вы используете display:flex, как вы можете видеть ниже:

Пример использования правильного CSS a:hover:before с display:flex (и, как вы можете видеть, это не работа):

.super {
    color: rgb(40, 40, 40);
    background-color: rgb(239, 239, 239);
    margin-bottom: 35px;
    padding: 10px;
}

p {
    position: relative;
    word-break: break-word;
    font-size: 17px;
    padding: 0px;
}

a {
    left: 0px;
    display:flex;
    position: relative;
    text-decoration: none;
}

a::before {
    content: '> ';
    position: relative;
    display: inline-block;
    margin-right: 5px;
    text-decoration:none!important;
}
  
a:hover{
    text-decoration:underline;
  }
a:hover::before {
    text-decoration:none!important;
  }

<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>

Answer 2

Я думаю, вы наведите курсор на неуместное местоположение a:hover:before