标题周围的宽度限制线>>

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>

我有一个用CSS网格创建的带有标题的行。我希望线条更小（例如5％），如何实现呢？ HTML和CSS h1 {display：grid; grid-template-columns：...

Answer 1

代替使用CSS Grid，您可以将display: flex;与justify-content: center一起使用来实现此目的。 :before和:after的宽度（最大）和margin的宽度可确保它们不触及标题。