Текст изменить, используя «контент»?

я пытаюсь изменить текст кнопки с css, но это не работает.

Я пытался использовать содержание: "что-то", но это не сработало.

button.mainMenu {
  content: "-";
}

button.mainMenu:hover {
  content: "X";
}
<body>
  <button class = "mainMenu" type = "button">
    </button>
</body>

В поле ничего не отображается :/

наведение не сработает. может быть кто-то может помочь, но контент можно добавить так button.mainMenu:before { display: block; content: " - "; } button.mainMenu { display: block; height: 30px; width: 200px; color: red; }

— Shoaib 08.04.2019 20:22
css
08.04.2019 20:15
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
49
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

content работает только с псевдоэлементами ::before и ::after.

button.mainMenu::before {
  content: "-";
}

button.mainMenu:hover::before {
  content: "X";
}
<button class = "mainMenu" type = "button"></button>
08.04.2019 20:18

Другие вопросы по теме

CSS-сетка | Как автоматически подогнать столбцы разного размера?
Есть ли синтаксическая ошибка в моем медиа-запросе?
Как развернуть компонент в нижней части страницы и сделать его в конечном итоге прокручиваемым?
Как я могу поместить результат счетчика в карточки поверх html-страницы?
С помощью CSS и HTML, как мне добиться результата таким образом
Выберите самый первый элемент с классом на странице
Нельзя центрировать заголовок и меню без потери высоты логотипа
Текст возвращается с пользовательского на веб-безопасный шрифт при перезагрузке (переопределить кеш)
Положение элемента Slider переменной h1, статическое перекрытие h2 первого
Нарушение CSS при переносе элемента в новый div (сестринский селектор)

Похожие вопросы

Компонент звездного рейтинга React с использованием flexbox и svg (с песочницей)
CSS Grid Responsive Image Gallery: Анимация застревает на своем пути
Lesscss как избежать круглых скобок
Я хочу сложить элементы списка, используя отображение как блок, но вместо этого они будут прятаться друг за другом
Проблемы с форматированием CSS, элементы div перемещаются друг относительно друга, а элементы div не центрируются
Можно ли сделать эти стрелки с помощью html и css?
Кнопки центрирования внутри Div под другим центрированным текстом
Как использовать любую owl.carousel?
Display:inline-block блоки word-wrap:break-word
Использование нескольких переключателей раскрывающегося списка не работает должным образом