使用伪类选择器来改变内容？

Question

如何<p>使用CSS的伪类选择器更改标记中包含的文本？

例如,当我将鼠标悬停在段落上时,段落的内容必须更改为p:hover选择器中指定的内容.

Answer 1

的jsfiddle.

一种方法是p:hover:before与content属性一起使用.

这是一个例子:

HTML:

<p>
<span>First text!</span>
</p>

CSS:

p:hover span {
  display:none
}
p:hover:before {
  content:"Second text appears instead!";
  color:red;
}

如果您想了解更多有关该content物业的信息,请查看这篇精彩的小文章.