我有一个用 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)
<h1>Text</h1>Run Code Online (Sandbox Code Playgroud)