Как использовать псевдоэлементы до и после в CSS

Как использовать псевдоэлементы до и после в CSS

Псевдоэлементы - это один из наиболее продвинутых селекторов, доступных для использования в CSS. Основная цель этих селекторов - создать уникальный стиль без изменения HTML-документа, который используется для создания базовой структуры данной веб-страницы.





Вот как использовать псевдоэлементы в CSS.



как отправить файлы на другой компьютер

Общие псевдоэлементы

Существует обширный список псевдоэлементов, которые могут облегчить жизнь веб-разработчика. Некоторые из этих псевдоэлементов включают:





  • До
  • После
  • Фон
  • Первая строка
  • Первое письмо

В определенных ситуациях некоторые псевдоэлементы окажутся более подходящими, чем другие, но единственное, что остается неизменным, - это общая структура для использования любого псевдоэлемента.

Пример структуры псевдоэлементов


selector::pseudo-element{
/* css code */
}

Хотя вы можете использовать элемент HTML в качестве селектора, рекомендуется использовать класс или идентификатор, чтобы избежать нацеливания на непредусмотренные элементы в вашем макете. Элемент, стиль или данные, которые вы хотите вставить в нужное место, должны быть помещены между фигурными скобками.



Псевдоэлементы до и после являются наиболее популярными в списке, и, учитывая, что существует множество практических способов их использования, нетрудно понять, почему.

Использование псевдоэлемента Before в CSS

Хотя это и возможно, в CSS сложно наложить на изображения читаемый текст. В основном это связано с тем, что изображение и текст занимают одну и ту же позицию на веб-странице.



Относительно легко отправить изображение на фон группы текста , но когда это изображение слишком яркое, оно имеет тенденцию перегружать текст, который находится поверх него. В этих случаях следующим шагом является попытка сделать изображение менее непрозрачным с помощью свойства непрозрачности.

Единственная проблема заключается в том, что, поскольку изображение и текст занимают одинаковое положение, текст также станет несколько прозрачным.



Один из немногих эффективных способов решения этой проблемы - использование псевдоэлемента before.

Использование примера псевдоэлемента Before


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Приведенный выше код создан для использования вместе с классом HTML landingPage ниже. Как показано в приведенном выше коде, с помощью псевдоэлемента before мы можем настроить таргетинг на изображение и использовать на нем свойство непрозрачности до того, как изображение будет объединено с текстом.





This is the result of using the before pseudo-element
to overlay and image with readable text.


Это приведет к наложению оверлея на изображение и отображению чистого текста сверху, как показано на изображении ниже:

Использование псевдоэлемента After в CSS

На практике псевдоэлемент after используется для создания HTML-формы. Большинство форм создаются с набором полей, которые требуют данных для успешной отправки формы.

Один из способов указать, что поле в форме требует данных - это поставить звездочку после метки этого поля. Псевдоэлемент after предоставляет вам практический способ сделать это.

Использование примера псевдоэлемента After


.required::after{
content: '*';
color: red;
}

Вставка приведенного выше кода в раздел CSS вашей формы гарантирует, что каждая метка, содержащая требуемый класс, будет сопровождаться красной звездочкой. Псевдоэлемент after также применим в этом примере, поскольку он помогает отделить стиль от структуры (что всегда идеально при разработке программного обеспечения).

как сделать собственные значки для Windows 10

Свойство Content

Как показано в приведенном выше примере псевдоэлемента after, свойство content - это инструмент, который используется для вставки нового содержимого на веб-страницу. Это свойство используется только с псевдоэлементами до и после.

Важно отметить, что даже если нет содержимого, доступного для подачи в свойство содержимого (например, в приведенном выше примере псевдоэлемента before), вам все равно необходимо использовать свойство содержимого в параметрах до или после псевдоэлемент, чтобы заставить их работать по назначению.

Теперь вы можете использовать псевдоэлементы в CSS.

В этой статье вы узнали, как идентифицировать и использовать псевдоэлементы в ваших программах CSS. Вы познакомились с псевдоэлементами до и после и получили практические способы их использования. Вы также смогли понять, почему свойство content необходимо для успешного использования псевдоэлементов до и после.

Делиться Делиться Твитнуть Эл. адрес 10 простых примеров кода CSS, которые вы можете изучить за 10 минут

Нужна помощь с CSS? Попробуйте для начала эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам.

Читать далее Похожие темы
  • Программирование
  • Веб-дизайн
  • CSS
Об авторе Кадейша Кин(Опубликовано 21 статья)

Кадейша Кин (Kadeisha Kean) - разработчик программного обеспечения полного стека и писатель по техническим / технологическим вопросам. У нее отличная способность упрощать некоторые из самых сложных технологических концепций; производство материала, понятного любому новичку в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).

Ещё от Kadeisha Kean

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться