Эта статья расскажет вам об изменении контента в CSS.
Как изменить содержимое в CSS?
Чтобы изменить содержимое в CSS, мы будем использовать следующие методы:
Давайте рассмотрим каждый метод один за другим!
Способ 1. Используйте селектор ::after со свойством содержимого для изменения содержимого в CSS
“ ::после » селектор помещает указанное содержимое после элемента HTML с помощью CSS « содержание ' имущество. Эта операция помогает добавить содержимое к выбранному элементу. Кроме того, « отображать ” можно использовать, чтобы скрыть существующий контент.
Давайте посмотрим на приведенный ниже пример, чтобы понять, как изменить содержимое в CSS с помощью селектора ::after.
Пример
Вот наша HTML-страница с текстом « Доброе утро!!! ». Заменим добавленный контент:
В настоящее время мы добавили « <р> «Тег с текстом в разделе body нашего HTML-файла:
< п > Доброе утро!!! < / п >В нашем файле CSS мы теперь будем использовать селектор ::after как « тело::после ” и используйте “ содержание ” свойство со значением “ Добрый вечер ” внутри его определения. В результате селектор CSS поместит текст сразу после написанного текста. Наконец, скройте существующий текст, используя « отображать » и установите для него значение « никто ”:
< стиль >тело::после {
содержание : 'Добрый вечер' ;
}
п {
дисплей: нет;
}
< / стиль >
Теперь сохраните файл HTML и просто откройте его в браузере или используйте «Живой сервер с той же целью:
Как видите, содержимое было успешно изменено с помощью CSS-селектора ::after:
Способ 2. Используйте селектор ::before со свойством содержимого для изменения содержимого в CSS.
В CSS « ::до селектор используется для того, чтобы содержимое отображалось прямо перед существующим содержимым элемента. Может использоваться в сочетании с « содержание », чтобы добавить новое содержимое к выбранному элементу.
Пример
Укажите селектор ::before сразу после тела как « тело:: перед ». Это поместит новый контент перед существующим контентом. Обратите внимание, что все остальные свойства остаются такими же, как и в предыдущем примере:
< стиль >тело:: перед {
содержание : 'Добрый вечер' ;
}
п {
дисплей: нет;
}
< / стиль >
Выход
Мы объяснили различные способы изменения содержимого в CSS.
Вывод
Чтобы изменить содержание, “ ::после ' а также ' ::до » Селекторы CSS используются с « содержание ' имущество. При первом подходе указанный текст добавляется после выбранного элемента, тогда как второй селектор CSS работает наоборот. Более того, « отображать ” можно использовать, чтобы скрыть существующее содержимое элемента. Вот как содержимое полностью изменяется в CSS. Мы рассмотрели два метода изменения содержимого в CSS.