css - 标题周围的有限宽度线

Question

我有一个用 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>

Answer 1

您可以使用 display: flex; 而不是使用 CSS Grid连同 justify-content: center为达到这个。 :before和 :after得到一个(最大)宽度和一些 margin以确保它们不会触及标题。

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>