标题两边带横线
Posted chengyunshen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了标题两边带横线相关的知识，希望对你有一定的参考价值。
1 <!doctype> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <style> 11 .title-line{ 12 width: 100%; 13 position: relative; 14 text-align: center; 15 } 16 .title-line span{ 17 background:white; 18 padding:0 6px; 19 } 20 .title-line:after{ 21 position: absolute; 22 content:""; 23 width: 100%; 24 height: 1px; 25 top:50%; 26 left: 0; 27 background: black; /*还可以颜色渐变*/ 28 z-index: -1; 29 } 30 </style> 31 <div class="title-line"> 32 <span>我是标题</span> 33 </div> 34 </body> 35 </html>
以上是关于标题两边带横线的主要内容，如果未能解决你的问题，请参考以下文章