26/26 Подскажите, пожалуйста, почему 99%?

Две последние вертикальные линии сдвигаются на миллиметр. Как исправить?

html,
body {
min-width: 570px;
height: 300px;
margin: 0;
font-family: “Arial”, sans-serif;
color: #ffffff;
background: url(“football.jpg”) 50% 50% no-repeat;
}

h1 {
position: relative;
width: 320px;
margin: 0;
padding-left: 40px;
text-transform: uppercase;
font-size: 80px;
letter-spacing:40px;
word-wrap: break-word;
text-indent: 100px;
font-weight: normal;
line-height: 100px;
text-shadow: -5px 5px rgba(0, 0, 0, 0.5);
}

h1::before {
content: “|||”;
position: absolute;
top: -5px;
left: -55px;
font-size: 55px;
letter-spacing: 5px;
font-weight: bold;
text-shadow: none;
}

Потому что в h1::before text-shadow - это и есть эти дополнительные параллельные вертикальные черты к content: “|”.

3 лайка

Спасибо))) Теперь 100%.