В этой статье я практически продемонстрирую, как использовать атрибуты псевдокласса::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>

Это результат этого стиля и структуры.

Спасибо, что дочитали до этого момента. следите за обновлениями, чтобы увидеть еще больше аппетитного контента.

До следующих раз, ура.