В этой статье я практически продемонстрирую, как использовать атрибуты псевдокласса::before и::after в CSS.
Чтобы продемонстрировать это, мы решили головоломку из cssbattle.dev.
На этом изображении показан начальный кадр этой викторины. Чтобы разобраться с этой конкретной загадкой, вы можете проверить ее здесь.
Подход, который я буду использовать для решения этой проблемы, заключается в использовании основного DIV и добавлении псевдоклассов до и после для картеля.
Первый шаг — указать тег body в CSS и стилизовать его в соответствии с фоном.
body{ background-color: #F5D6B4; display: flex; justify-content: center; align-items: center; }
Следующим шагом будет обработка более широкого DIV. Мы также создадим псевдоклассы.
div { width: 150px; height: 150px; background: #D86F45; } div::before{ content: ''; display: inline; background-color: #D86F45; width: 50px; height: 250px; position: absolute; top: 25; right: 175; } div::after{ content: ''; display: inline; background-color: #D86F45; height: 50.1px; width: 250px; position: absolute; top: 125; right: 75; }
Чтобы использовать эти псевдоклассы, необходимо несколько стилей: содержимое, положение абсолютного значения, ширина и высота, а также отображение.
в конце ваш документ будет иметь следующие стили
<div></div> <style> body{ background-color: #F5D6B4; display: flex; justify-content: center; align-items: center; } div { width: 150px; height: 150px; background: #D86F45; } div::before{ content: ''; display: inline; background-color: #D86F45; width: 50px; height: 250px; position: absolute; top: 25; right: 175; } div::after{ content: ''; display: inline; background-color: #D86F45; height: 50.1px; width: 250px; position: absolute; top: 125; right: 75; } </style>
Это результат этого стиля и структуры.
Спасибо, что дочитали до этого момента. следите за обновлениями, чтобы увидеть еще больше аппетитного контента.
До следующих раз, ура.