Ajoutez "

Question

La sortie sur ':hover' est toujours

"1IPSUM"

Si je décide d'ajouter un élément ':before' avec le contenu:"1"', il ajoutera simplement un 1, ce qui fera que la sortie avant le survol sera "11"

Le résultat que je souhaite est :

La sortie en survol est "IPSUM"

Violon : https://jsfiddle.net/Zxdfvv/u9xgoks3/

.btn:hover:after {
  padding-bottom: 200px;
  content:"IPSUM";
}

<div class='btn'>1</div>

P粉275883973 · Answer

Merci EmSixTeen ! Je suis à l'école, je ne peux donc pas me connecter à mon compte. Les pseudo-éléments fonctionnent-ils correctement sur les différents navigateurs ?

P粉715304239 · Answer

Vous définissez content:，而不是为元素本身设置。这就是为什么当您向::before添加内容时，它会显示在元素文本之前，然后如果您使用::after pour un pseudo-élément, qui apparaîtra après le texte de l'élément.

Vous pouvez utiliser des pseudo-éléments pour définir le texte initial. Vous pouvez donc faire ceci :

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: #006400;
  display: grid;
  place-items: center;
}

main {
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.btn {
  border: 3px solid black;
  text-align: center;
  border-radius: 20px;
  letter-spacing: 2px;
  padding: 1em 1.5em;
  background-color: #ffd700;
  color: black;
  font-family: monospace;
  display: inline-block;
  margin: 1em;
}

.btn::after {
  display: inline-block;
}

.btn--empty::after {
  content: "";
}

.btn--pseudo::after {
  content: "lorem";
}
.btn:hover::after {
  content: "ipsum";
}