Испытание: ювелирная работа - 98%

Курсы §30. Рамки и фоны, часть 2
1

Задание выполняется на 98% из-за вот этого селектора:

:before,
:after {
    position: absolute;
    border-style: solid;
    content: '';
}

В этом варианте почему-то появляется несколько черных маленьких квадратиков в разных местах.

В итоге я его выполнил на 100%, используя такой селектор:

.stone:before,
.stone:after {
    position: absolute;
    border-style: solid;
    content: '';
}

Можно было бы и успокоиться, но я никак не могу понять ОТКУДА берутся те самые черные квадратики? :rage: Объясните, пожалуйста.
Ведь по сути обе версии выполняют то же самое и мы нигде не задаем черный фон или толщину рамок по умолчанию для псевдоэлементов…

2

Такой селектор задаст стили всем псевдоэлементам, в том числе у html и body.

А такой — только для .stone.

Квадратики — это и есть рамки элементов. Когда мы задаём border-style, рамки начинают отображаться, ведь по умолчанию цвет рамок — чёрный, а ширина рамок — medium.

2 лайка
3

блиин! вроде такая мелочь, а как всё меняет…
спасибо за разъяснение - я как-то про html и body не подумал…как говорится, а слона-то я и не заметил :slight_smile: