У меня есть заголовок с линиями вокруг, созданный с сеткой CSS. Мне бы хотелось, чтобы линии были меньше (говорят 5%). Как мне этого добиться?
HTML и CSS
h1 {
display: grid;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
align-items: center;
text-align: center;
grid-gap: 20px;
width: 100%;
font-size: 3.4em;
text-transform: uppercase;
color: #000;
}
h1:before,
h1:after {
content: '';
border-top: 2px solid #ff3f3f;
}
<h1>Text</h1>