How to Dynamically Change Content on Hover Using CSS ::after Pseudo-element?

How to Change Content on Hover Using CSS

Changing the content of an element on hover is a common task in web development. While you may think it's a straightforward process, it requires a deeper understanding of CSS content properties along with its pseudo-elements, such as ::after and ::before.

In your example, the goal is to change the content of the 'NEW' label to 'ADD' when hovered over. Initially, you approached this issue by attempting to use the content property, but encountered difficulties. Fortunately, a clever solution exists to achieve the desired effect.

The trick lies in combining the content property with the ::after pseudo-element:

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

This CSS rule targets the p element with the class 'new-label' inside an 'a' tag within the 'item' class when in its hover state. It then dynamically replaces the existing content with 'ADD'.

To illustrate, here's an updated example:

<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>

Now, when you hover over the 'NEW' label, it seamlessly transforms into 'ADD,' fulfilling your initial requirement.

The above is the detailed content of How to Dynamically Change Content on Hover Using CSS ::after Pseudo-element?. For more information, please follow other related articles on the PHP Chinese website!