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;

Хочешь научиться программировать?!

Заходи в нашу группу Вконтакте, там много полезной и интересной информации

Оставить комментарий

avatar
  Подписаться  
Уведомление о