Como escrever :hovere :visitedcondição para a:before?
Estou tentando, a:before:hovermas não está funcionando
Como escrever :hovere :visitedcondição para a:before?
Estou tentando, a:before:hovermas não está funcionando
Respostas:
Isso depende do que você está realmente tentando fazer.
Se você simplesmente deseja aplicar estilos a um :beforepseudo-elemento quando o aelemento corresponde a uma pseudo-classe, você precisa escrever a:hover:beforeou a:visited:beforesubstituir. Observe que o pseudoelemento vem após a pseudo classe (e, de fato, no final de todo o seletor). Observe também que são duas coisas diferentes; chamá-los de "pseudo-seletores" vai confundir você quando você tiver problemas de sintaxe como este.
Se você está escrevendo CSS3, pode denotar um pseudoelemento com dois pontos para deixar essa distinção mais clara. Portanto, a:hover::beforee a:visited::before. Mas se você estiver desenvolvendo para navegadores herdados, como o IE8 e anteriores, poderá usar apenas dois pontos únicos.
Esta ordem específica de pseudo-classes e pseudo-elementos é declarada na especificação :
Um pseudoelemento pode ser anexado à última sequência de seletores simples em um seletor.
Uma sequência de seletores simples é uma cadeia de seletores simples que não são separados por um combinador. Sempre começa com um seletor de tipo ou seletor universal. Nenhum outro seletor de tipo ou seletor universal é permitido na sequência.
Um seletor simples é um seletor de tipo, seletor universal, seletor de atributo, seletor de classe, seletor de ID ou pseudo-classe.
Uma pseudo-classe é um seletor simples. Um pseudoelemento, no entanto, não é, embora se assemelhe a um simples seletor.
No entanto, para pseudo-classes de ação do usuário como :hover1 , se você precisar que esse efeito seja aplicado somente quando o usuário interagir com o próprio pseudo-elemento, mas não com o aelemento, isso não será possível senão por meio de uma solução alternativa dependente de layout obscura . Como está implícito no texto, atualmente os pseudoelementos CSS padrão não podem ter pseudo-classes. Nesse caso, você precisará aplicar :hovera um elemento filho real em vez de um pseudoelemento.
1 Obviamente, isso não se aplica a pseudo-classes de link, :visitedcomo na pergunta, pois pseudo-elementos não são links.
text-decoration.
Escreva em a:hover::beforevez de a::before:hover: exemplo .
:aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (single :tem melhor suporte)
Para alterar o texto do link do menu ao passar o mouse. (Texto de idioma diferente ao passar o mouse) aqui está o
html:
<a align="center" href="#"><span>kannada</span></a>css:
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"ಕನ್ನಡ";
}a:hover::beforecom o estilo text-decoration: underline, o que faz com que o sublinhado escolha a cor vermelha do texto de substituição.
Tente usar .card-listing:hover::after hovere afterusá- ::lo funcionará
A resposta do BoltClock está correta. A única coisa que quero acrescentar é que, se você quiser selecionar apenas o pseudo elemento, coloque um espaço.
Por exemplo:
<li><span data-icon='u'></span> List Element </li>ao invés de:
<li> data-icon='u' List Element</li>Dessa forma, você pode simplesmente dizer
ul [data-icon]:hover::before {color: #f7f7f7;}que destacará apenas o pseudo elemento, não o elemento li inteiro
Você também pode restringir sua ação a apenas uma classe usando o colchete direito (">"), como fiz neste código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>Nota: A opção hover: before funciona apenas na classe .test1