Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 23 из 53 · 10 мин
::before и ::after с content, ::first-letter, ::first-line, ::selection, ::placeholder, ::backdrop.
Буквица у первого абзаца статьи, огромные кавычки у отзыва, фирменное выделение текста.
Могу нарисовать «виртуальные» элементы до и после содержимого. В HTML их нет — только в CSS.
::beforecontent.<style>
blockquote::before { content: "“"; font-size: 3em; color: #c8763a; line-height: 0; vertical-align: -0.4em; }
</style>
<blockquote>Лучший пенал в Казани</blockquote>::after<style>
a::after { content: " →"; }
</style>
<a href="#">Читать дальше</a>content"→", "" для пустого декора, counter(), attr().content псевдоэлемент не появится.<style>
.new::after { content: "NEW"; background: #c8763a; color: white; font-size: 0.7em; margin-left: 6px; padding: 1px 4px; }
</style>
<span class="new">Пенал с лавандой</span>::first-letter<style>
p::first-letter { font-size: 2.5em; float: left; line-height: 1; margin-right: 4px; color: #6b3e26; }
</style>
<p>Обжарка — это искусство и немного химии. Мы занимаемся ей каждое утро.</p>::first-line<style>
p::first-line { font-weight: 700; } p { width: 200px; }
</style>
<p>Первая строка жирная, остальные — обычные, как в журнале.</p>::selection<style>
::selection { background: #c8763a; color: white; }
</style>
<p>Выдели меня мышью</p>::placeholderplaceholder.<style>
input::placeholder { color: #a08c7a; font-style: italic; }
</style>
<input placeholder="Например, Анна">::backdropdialog и полноэкранными элементами.<style>
dialog::backdrop { background: rgb(0 0 0 / 50%); }
</style>
<dialog open>Окно</dialog>Декор — в псевдоэлементах, смысл — в HTML. Текст в content скринридер может и не прочитать.
Добавь отзыву blockquote декоративную кавычку через ::before с content: "“" и цветом #c8763a, а первой букве .article p — font-size: 2.5em.
content — пока нетВыберите один ответ.
Что обязательно нужно, чтобы ::before появился?
Выберите один ответ.
Почему у псевдоэлементов два двоеточия (::before)?
Проверяем состояние обучения…