HTML + CSS Content, after, before

Уроки HTML+CSS: Content, after, before

В данном уроке мы с вами рассмотрим свойство content, а так же псевдоэлементы after и before, которые используются для отображения желаемого контента до или после содержимого элемента.

Свойство content добавляет содержимое. Чаще всего свойство content используется вместе с псевдоэлементами after и before.

Псевдоэлемент before позволяет добавить какой то контент во внутрь элемента в самое НАЧАЛО.

<style>
.html_test:before {
   content: "А ВОТ И ТО СЛОВО!!! ";
}
</style>

<p class="html_test">Добавляем НАЧАЛО в начало строки, через свойство content!</p>

Добавляем текст в НАЧАЛО строки, через свойство content!

Псевдоэлемент afterпозволяет добавить какой то контент во внутрь элемента в самый КОНЕЦ.

<style>
.html_test:after {
   content: "А ВОТ И ТОТ ТЕКСТ!!! ";
}
</style>

<p class="html_test">Добавляем текст в КОНЕЦ строки, через свойство content!</p>

Добавляем текст в КОНЕЦ строки, через свойство content!

Данный код не переписывает текст внутри элемента. Вот как это выглядит в коде.

content

normal Значение по умолчанию. 
none Не добавляет содержимое. Используется если нужно удалить ранее добавленный контент с помощью данного свойства.
counter() Даёт возможность создавать счётчики, задавая для них точку отсчёта и приращение на некоторую величину с помощью свойства counter-reset. Для прямого увеличения счёта необходимо использовать свойство counter-increment.
attr() Добавляет до или после элемента значение атрибута, заключённого в скобки. Чтобы вставить пробел между основным содержимым и генерируемым, нужно добавить пробел перед скобкой или после нее, например, content: attr( href);
» « Текст, который добавляется на веб-страницу, должен быть заключен в двойные или одинарные кавычки. Пустые кавычки можно использовать для добавления блочного содержимого.
open-quote Добавляет к содержимому открывающую кавычку.
close-quote Добавляет к содержимому закрывающую кавычку.
no-open-quote Удаляет открывающую кавычку, при этом уровень их вложенности продолжает учитываться.
no-close-quote Удаляет закрывающую кавычку.
url() Добавляет медиа-содержимое, например, изображение, звук, видео. В качестве значения атрибута в скобках указывается адрес внешнего ресурса, который вставляется в выбранное место документа.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

С помощь этого свойства вы также можете добавлять иконки и спецсимволы.

<style>
.html_test:after {
content: "&times";
}
</style>

<p class="html_test">Вот иконка - </p>

Вот иконка —

По мимо этого вы можете прописать стили для добавляемого контента, для этого нужно вместе со свойством content прописать и другие свойства.

<style>
.html_test3:after {
content: "\2718";;
font-size: 30px;
color: red;
}
</style>

<p class="html_test">Вот иконка - </p>

Вот иконка —

Добавляем кавычки для текста с помощью свойства content

Вы можете добавить кавычки с помощью метода content, для этого нужно добавить данному свойству значение open-quote для открывающейся кавычки и close-quote — для закрывающейся.

Давайте рассмотрим пример…

<style>
.html_test:before {
content: open-quote;
font-size: 30px;
}
.html_test:after {
content: close-quote;
font-size: 30px;
}
</style>

<p class="example html_test">Этот текст в кавычках</p>

Этот текст в кавычках

В таблице ниже представлены все виды кавычек которые вы можете использовать.

Описание Внешний вид Номер в Юникоде HTML-код/Мнемоника
Двойная кавычка « \0022 &quot;
Апостроф \0027 &apos;
Открывающая одинарная кавычка \2018 &lsquo;
Закрывающая одинарная кавычка \2019 &rsquo;
Закрывающая двойная кавычка \201C &ldquo;
Правая двойная кавычка \201D &rdquo;
       
Открывающая левая кавычка «ёлочка» « \00AB &laquo;
Закрывающая правая кавычка «ёлочка» » \00BB &raquo;
Нижняя одинарная открывающая кавычка \201A &sbquo;
Верхняя одинарная обратная кавычка \201B &#8219;
Нижняя двойная открывающая кавычка \201E &bdquo;
Двойная верхняя обратная кавычка \201F &#8223;
Одинарная открывающая (левая) французская угловая кавычка \2039 &lsaquo;
Одинарная закрывающая (правая) французская угловая кавычка \203A &rsaquo;
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime