小编Jen*_*ny 的帖子

标题周围的有限宽度线

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

Run Code Online (Sandbox Code Playgroud)