web-dev-qa-db-fra.com

Est-il possible d'avoir un pseudo élément: after sur un bouton?

J'ai un bouton et en vol stationnaire, je veux afficher un élément après. Mais je ne peux pas le voir. Est-il possible d'avoir un élément: after sur un bouton?

html:

<button class="button button-primary">My button</button>

css:

.button {
  cursor: pointer;
  height: 30px;
}

.button-primary {
  border: none;
}
.button-primary:hover:after {
  display: block;
  position: relative;
  top: 3px;
  right: 3px;
  width: 100px;
  height: 5px;
}
htmlcsspseudo-element
9
user1386906

Cela devrait maintenant fonctionner sur tous les navigateurs à jour.

Pour que cela fonctionne, vous devez ajouter content:""; dans votre after.

13
Albzi

Oui, vous pouvez l’utiliser - à condition que vous n’ayez pas besoin de prendre en charge de très vieux navigateurs, par exemple. MS IE 7 ou inférieur. Je ne connais aucun autre navigateur qui ne comprend pas les pseudo-éléments sur les balises HTML vides. En fait, je l'ai déjà utilisé sur plusieurs sites de production sans aucun problème.

0
feeela