Limited width line around title

Question

I have a title with lines around created with CSS grid. I would like the lines to be smaller (saying 5%) How can I achieve this?

HTML and 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>

Answer 1

Instead of using CSS Grid, you can use display: flex; along with justify-content: center to achieve this. The :before and :after get a (max-)width and some margin to make sure they don't touch the heading.

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 3.4em;
  text-transform: uppercase;
  color: #000;
}

h1:before,
h1:after {
  content: '';
  border-top: 2px solid #ff3f3f;
  width: 5%;
  margin: 0 10px;
}

<h1>Text</h1>