【标题分割伪元素】网页中常见的标题分割效果css代码

今天分享一段网页中常见的标题分割样式布局，这种中间文字 两边横线的布局很常见，代码也很简单，给大家分享一下，不会的同学直接参考。

html代码：

<h3 class="page-title">热门美食</h3>

css代码：

.page-title {  
    position: relative;  
    text-align: center;
    margin: 30px 0;
 
}  
.page-title::before, .page-title::after {  
    content: '';  
    position: absolute;  
    top: 50%; 
    height: 1px; 
    width: 400px; 
    background-color: #ccc; 
}  
  
.page-title::before {  
    left: 130px; 
}  
  
.page-title::after {  
    right:130px;
}