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

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

avatar
88 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
84 Авторы комментариев
GeorgekawDanielElambDanielElambDanielquomaDanielquoma Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Cialis Prix Sans Ordonnance [url=http://apcialisle.com/#]Buy Cialis[/url] Levitra Filmtabletten Teilen Buy Cialis Baclofene Achat Ligne

JanleF
Гость

Purchase Doxycycl Hyc 50 Mg [url=https://apcialisle.com/#]cialis online canada[/url] Acquistare Levitra In Farmacia Cialis Buy Zoloft Uk

JanleF
Гость

Loss Viagra Prescription [url=https://buyciallisonline.com/#]Cialis[/url] Viagra Sales In Canada Cialis Online Pharmacy Usa

bemnite
Гость
bemnite

how to buy cialis over the counter https://canadianpharmacystorm.com cheap cialis in sydney

AlvinCox
Гость
AlvinCox

viagra sale point pakistan order cialis cialis professional buy

CharlesGOP
Гость
CharlesGOP

cheap viagra in nz buy generic cialis buy viagra no prescription canada

JanleF
Гость

Cheap Canadian Prescriptions Online [url=https://buyciallisonline.com/#]Buy Cialis[/url] Propecia Cheapest Cialis cialis generic best price Amoxicillin Potassium Clavulanate

Waltonplort
Гость
Waltonplort

cialis for sale in the us https://viagrawithoutdoctorspres.com cheap viagra and cialis on line

JanleF
Гость

Canadian Discount Pharmacies [url=https://abcialisnews.com/#]cialis online without[/url] Cialis Se Puede Comprar Sin Receta Medica cialis generic 2017 Buying Azithromycin 500mg

BarryNaW
Гость
BarryNaW

cialis coupon discounts https://edpillsphrm.com can buy viagra dubai

Jefferykap
Гость
Jefferykap

cialis canadian pharmacy https://www.sildwithdoctorprescription.com prices of cialis

Marvinerulk
Гость
Marvinerulk

levitra online order http://alexa24ph.com – cialis vs viagra order viagra canada

Marvinerulk
Гость
Marvinerulk

viagra sale singapore http://aralenph.com – buy alaren generic buy viagra cheap online no prescription

Marvinerulk
Гость
Marvinerulk

cheap viagra uk site http://zithazi.com – zithromax price cialis 20 mg film-coated tablets tadalafil

Marvinerulk
Гость
Marvinerulk

mail order cialis from canada http://tadal24ph.com – cialis pills for sale where to buy viagra in vancouver

Marvinerulk
Гость
Marvinerulk

buy viagra online england http://hydroxychloroquine24.com – hydroxychloroquine buy cialis no prescription canada

Marvinerulk
Гость
Marvinerulk

can you really buy viagra online http://aralenph.com – alaren price legit cheap viagra

Marvinerulk
Гость
Marvinerulk

buy viagra legal http://hydroxychloroquine24.com – plaquenil viagra sale us

Marvinerulk
Гость
Marvinerulk

buy quality viagra online http://alexa24ph.com – sildenafil generic viagra cheap uk

Marvinerulk
Гость
Marvinerulk

buy cialis and viagra online http://aralenph.com – generic alaren order viagra usa

Marvinerulk
Гость
Marvinerulk

cheap viagra levitra cialis http://aralenph.com – alaren price buy viagra hujagra 2011

AlfredAdvog
Гость
AlfredAdvog

buy sildenafil
buying viagra plus next day delivery

AlfredAdvog
Гость
AlfredAdvog

cheap viagra
cialis uk cheap

AlfredAdvog
Гость
AlfredAdvog

buy viagra
cialis super active cheap

AlfredAdvog
Гость
AlfredAdvog

viagra pills
cialis for sale in the philippines

AlfredAdvog
Гость
AlfredAdvog

viagra without a doctor prescription
cheap viagra new zealand

AlfredAdvog
Гость
AlfredAdvog

viagra without doctor prescription
how to buy viagra online

AlfredAdvog
Гость
AlfredAdvog

generic viagra 100mg
buy viagra yahoo answers

AlfredAdvog
Гость
AlfredAdvog

generic viagra
buy viagra australia online no prescription

AlfredAdvog
Гость
AlfredAdvog

viagra online
can you buy viagra ebay

DennisLof
Гость
DennisLof

cialis cost buy generic cialis
how long does 20mg cialis keep in system

DennisLof
Гость
DennisLof

prices of cialis buy here
cialis reps

DonaldTwill
Гость
DonaldTwill

online viagra cheap viagra
viagra 100mg

DonaldTwill
Гость
DonaldTwill

viagra help cialis vs viagra
canadian viagra

JosephDiona
Гость
JosephDiona

5 mg cialis coupon printable which is better – cialis or viagra
coupons for cialis

JosephDiona
Гость
JosephDiona

liquid cialis lowest price cialis
generic cialis black 800mg

Thomasreeld
Гость
Thomasreeld

cialis vs viagra: viagra dosage recommendations buy cheap levitra canada

Thomasreeld
Гость
Thomasreeld

viagra samples: viagra without a doctor prescription order cialis pills

abakaro
Гость

Levitra On Line Generico [url=https://buycialisuss.com/]Buy Cialis[/url] Amoxicillin Before Food generic cialis 5mg Clomid Plus Fostimon

JohnnieQuabs
Гость
JohnnieQuabs

buy prescription drugs online without ambien without a doctor’s prescription discount prescription drugs onlinepharmacyero.com

JohnnieQuabs
Гость
JohnnieQuabs

how to get prescription drugs without doctor viagra without doctor prescription amazon prescription drugs canada buy online onlinepharmacyero.com

Michaeldus
Гость
Michaeldus

cialis generic availability buy cialis

Michaeldus
Гость
Michaeldus

viagra or cialis cialis

Jeffreymax
Гость
Jeffreymax

the effects of cialis on women: cialis coupon

Jeffreymax
Гость
Jeffreymax
treantinc
Гость
treantinc

Keflex Std Kakerent [url=https://bbuycialisss.com/#]cheapest place to buy cialis[/url] fadiappept Buy Diflucan Yeast Infection groongendodo cialis online pharmacy CaunninkCify Viagra Malaga

JamieSog
Гость
JamieSog

viagra pill: buy viagra
wikigogy.org

JamieSog
Гость
JamieSog

canadian viagra: viagra prices
wikigogy.org

Justinrom
Гость

the effects of cialis on women: cialis generic
warrensburgfmc.org generic cialis tadalafil 20mg

Justinrom
Гость

cialis coupon code: generic cialis
warrensburgfmc.org cialis generic