如何在h1文本的中心製作小邊框？

Question

如何在h1文本的中心製作小邊框？

Answer 1

你可以使用：僞元素。

h1 span { 
 
    position: relative; 
 
    color: #F56B20; 
 
} 
 
h1 span:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 15%; 
 
    height: 1px; 
 
    border-bottom: 2px solid #863C2F; 
 
    bottom: -2px; 
 
    left: 50%; 
 
    margin-left: -7.5%; 
 
}

<h1><span>Our Services</span></h1>

Answer 2

使用僞元素::after插入頭之後空白元素，風格它看起來像一個邊界：

#h_1{ 
 
    color:orange; 
 
} 
 
#h_1::after{ 
 
    content:""; 
 
    display:block; 
 
    position:absolute; 
 
    width:25px; 
 
    height:3px; 
 
    background-color:maroon; 
 
    margin-left:80px; 
 
}

<h1 id="h_1">Our Services</h1>