幾行程式碼實現自定義標題

摘要： 在標題左右加上一條橫線，以此突出標題，這種樣式在開發中很常見，使用css的偽類before、after實現，前面有很多關於偽類實現三角形、聊天氣泡框的文章可以自行翻閱，雖然功能很簡單，但是這裡記錄一下分享出來，節約以後的開發時間，效果圖如下： css程式碼： h5{...

在標題左右加上一條橫線，以此突出標題，這種樣式在開發中很常見，使用css的偽類before、after實現，前面有很多關於偽類實現三角形、聊天氣泡框的文章可以自行翻閱，雖然功能很簡單，但是這裡記錄一下分享出來，節約以後的開發時間，效果圖如下：

css程式碼：

h5{
position: relative;
width: 130px;
margin:80px auto;
text-align: center;
font-weight: normal;
}
h5:before,h5:after{
position: absolute;
content: '';
width:60%;
height: 1px;
top:50%;
background-color: #ff7f00;
}
h5:before{
right:130px;
}
h5:after{
left: 130px;
}

html程式碼：

<h5>我的自定義標題</h5>

這裡線條的寬度已經距離標題文字的距離都可以自定義。

原文作者技術部落格： https://www.jianshu.com/u/ac4daaeecdfe

95後前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這裡，希望給每一個看到的你能帶來一點幫助。

歡迎留言交流。