标题周围的有限宽度线

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;with来代替 CSS Gridjustify-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>