Испытание: поиграйся со шрифтами

Курсы
1 
body {
  margin: 0px;
  width: 570px;
  height: 300px;
  background: url("football.jpg") -120px -60px no-repeat;
  color: #ffffff;
  font-family: "Arial", sans-serif;
}

h1 {
position: relative;
width: 320px;
margin: 0;
padding-left: 40px;
color: transparent;
}

h1::before {
content: "●";
position: absolute;
left: 45px;
letter-spacing:5px;
color: #ffffff;
font-size: 85px;
text-shadow:-5px 5px rgba(0, 0, 0, 0.5);
}

h1::after {
content: "KEKSOBAS";
color: #ffffff;
font-size:80px;
font-weight:100;
position: absolute;
left: 40px;
letter-spacing: 40px;
width:300px;
word-wrap:break-word;
text-indent:100px;
line-height:100px;
text-shadow:-5px 5px rgba(0, 0, 0, 0.5);
}

Получается только на 87% Где ошибка?

2

Если более конкретно, то это Сборник: Тонкости CSS, Глава 3: Оформление текста, часть 2

3

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

  1. Размер шрифта псевдоэлемента before должен быть 90 пикселей;
  2. Всему заголовку задать внутренний отступ вверх 4 пикселя;
  3. Псевдоэлементу before задать внешний отступ вверх -5 пикселей.

Внеся эти правки вы получите 94% совпадения. Хорошо было бы переделать задание без использования after.

1 лайк