Как менять текст при наведении CSS

Для изменения текста при наведении мы можем использовать псевдокласс :hover в CSS. Вот пример:

HTML:

<p>Наведите курсор на этот текст</p>

CSS:

p:hover {
  color: red;
  font-weight: bold;
  content: "Текст изменен!";
}

В этом примере при наведении курсора на текст он станет красным, жирным и изменится на «Текст изменен!». Свойство content используется для замены текста.