Как изменить контент при наведении

Я играл с этим, и я думал, что это будет довольно просто. То, что я пытаюсь сделать, навешивается над ярлыком "NEW". Когда-то в состоянии зависания измените содержимое с "NEW" на "ADD", используя только 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{
  content: 'ADD';
}

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

Ответ 1

Для этого было добавлено свойство CSS content вместе с ::after и ::before псевдоэлементами.

.item:hover a p.new-label:after{
    content: 'ADD';
}

JSFiddle Demo

Ответ 2

Этот точный пример представлен на странице разработчиков mozilla:

::after

Как вы можете видеть, даже позволяет создавать всплывающие подсказки!:) Кроме того, вместо того, чтобы вставлять фактический текст в ваш CSS, вы можете использовать content: attr(data-descr); и хранить его в атрибуте data-descr="ADD" вашего HTML-тега (что приятно, потому что вы можете его перевести)

CSS content может использоваться только с f с :after и :before псевдоэлементами, поэтому вы можете попытаться выполнить что-то вроде этого:

.item a p.new-label span:after{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span:after {
  content: 'ADD';
}

CSS: после псевдоэлемента совпадает с виртуальным последним дочерним элементом выбранный элемент. Обычно используется для добавления косметического содержимого в элемент, используя свойство CSS содержимого. Этот элемент встроен в по умолчанию.

Ответ 3

.label:after{
    content:'ADD';
}
.label:hover:after{
    content:'NEW';
}

<span class="label"></span>

Ответ 4

Этот маленький и простой трюк, который я только что узнал, может помочь кому-то, кто пытается избежать: до или: после псевдоэлементов (по какой-либо причине) при изменении текста при наведении. Вы можете добавить оба текста в HTML, но изменить свойство CSS 'display', основанное на зависании. Предполагая, что во втором тексте "Добавить" есть класс с именем "add-label"; вот небольшая модификация:

span.add-label{
 display:none;
}
.item:hover span.align{
 display:none;
}
.item:hover span.add-label{
 display:block;
}

Вот демонстрация кода: https://codepen.io/ifekt/pen/zBaEVJ