直接上代碼

<style type="text/css">
	.title {
	  position: relative;
	  font-size: 32px;
	  color: #fff;
	  height: 45px;
	  line-height: 45px;
	  text-align: center;
	  top: 60px;
	}
	.title:before {
	  content: "";
	  position: absolute;
	  width: 28px;
	  height: 2px;
	  top: 50%;
	  background-color: #fff;
	  left: 42%;
	}
	.title:after {
	  content: "";
	  position: absolute;
	  width: 28px;
	  height: 2px;
	  top: 50%;
	  background-color: #fff;
	  right: 42%; 
	}
</style>

<div class="title">標題</div>

效果如下圖

總結

以上是生活随笔為你收集整理的css实现标题左右横线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。