使用:hover和:hover:after更改<span>的内容

Question

下面的代码运行良好：

HTML：

<span class="counter" >test</span>

CSS：

  .counter:hover:after{
    content: "hello";
  }

结果：testhello

但是我怎么才能把“test”转换成“hello”呢？我尝试了下面的代码，但没有附加任何内容：

CSS：

  .counter:hover{
    content: "goodbye";
  }

预期结果：goodbye

Answer 1

content只能与::before和::after一起使用。content不是元素内的文本。你应该这样使用它：

​

.counter:after {
  content: "hello";
}

.counter:hover::after {
  content: "goodbye";
}

<span class="counter" ></span>

​

Javascript解决方案：

​

const counter = document.querySelector(".counter");

counter.addEventListener("mouseover",function(){
  this.innerHTML = "hello";
})
counter.addEventListener("mouseout",function(){
  this.innerHTML = "goodbye";
})

<span class="counter" >test</span>

​

Answer 2

使用font-size隐藏旧内容，显示新内容：

​

.counter:hover:after {
  content: "hello";
  font-size:initial;
}

.counter:hover {
  font-size:0;
}

<span class="counter">test</span>

​