Comment modifier dynamiquement le contenu en survol à l'aide de CSS :: après un pseudo-élément ?

Comment modifier le contenu en survol à l'aide de CSS

Modifier le contenu d'un élément en survol est une tâche courante dans le développement Web. Même si vous pensez qu'il s'agit d'un processus simple, il nécessite une compréhension plus approfondie des propriétés du contenu CSS ainsi que de ses pseudo-éléments, tels que ::after et ::before.

Dans votre exemple, l'objectif est de changer le contenu de l'étiquette « NOUVEAU » à « AJOUTER » lorsque vous le survolez. Initialement, vous avez abordé ce problème en essayant d'utiliser la propriété content, mais vous avez rencontré des difficultés. Heureusement, une solution astucieuse existe pour obtenir l'effet souhaité.

L'astuce réside dans la combinaison de la propriété content avec le pseudo-élément ::after :

<code class="CSS">.item:hover a p.new-label:after {
    content: 'ADD';
}</code>

Cette règle CSS cible le p élément avec la classe 'new-label' à l'intérieur d'une balise 'a' dans la classe 'item' lorsqu'il est dans son état de survol. Il remplace ensuite dynamiquement le contenu existant par « AJOUTER ».

Pour illustrer, voici un exemple mis à jour :

<code class="HTML"><div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div></code>

<code class="CSS">body {
    font-family: Arial, Helvetica, sans-serif;
}
.item {
    width: 30px;
}
a {
    text-decoration:none;
}
.label {
    padding: 1px 3px 2px;
    font-size: 9.75px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}
.label.success {
    background-color: #46a546;
}

.item a p.new-label span{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span{
  display: none;
}
.item:hover a p.new-label:after{
  content: 'ADD';
}</code>

Maintenant, lorsque vous survolez l'étiquette « NOUVEAU », il se transforme de manière transparente en « ADD », répondant ainsi à votre exigence initiale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!