CSS 两边是线中间是文字的效果

刚开始做的时候想了一下这个是怎么做出来的，后来在网上看到有个类似的效果，研究一下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两根线中间有文字的实现</title>
	<link rel="stylesheet" href="iconfont/iconfont.css">
	<style>
        .dv1 {
        	327px;
        	height: 22px;
        	position: relative;
        	margin:100px auto;
        	
        }
        .liner {
        	100%;
        	height:1px;
        	background-color: #ccc;
        	position: relative;
        	top:50%;
        }
        .dv2 {
        	text-align:center;
        	120px;
        	height:22px;
        	line-height: 22px;
        	margin:0 auto;
        	background-color: #fff;
        	position: relative;
        	z-index:3;
        }
          .icon-star {
          	font-size:22px;
          	color:red;
          	margin-right:10px;
          }





	</style>
</head>
<body>
	<div class="dv1">
		<div class="liner"></div>
        <div class="dv2">
        	<i class="iconfont icon-star"></i>
        	<span>热门推荐</span>
        </div>

	</div>
</body>
</html>

　　代码中的小星星可以在阿里字体图标库中下载一个试试，应该没问题

CSS 两边是线 中间是文字的效果

CSS 两边是线中间是文字的效果