CSS文字左右两横线效果

代码效果请直接看演示吧：Demo演示

效果一代码

<style type="text/css" media="screen">
#login_frame .with-line {
	width:300px;font-size: 16px;
	color: #999;
	margin: 0 auto;
	position: relative;
	text-align: center
}

#login_frame .with-line:before {
	content: "";
	border-top: 1px solid #ededed;
	display: block;
	position: absolute;
	width: 60px;
	top: 10px;
	left: 0
}

#login_frame .with-line:after {
	content: "";
	border-top: 1px solid #ededed;
	display: block;
	position: absolute;
	width: 60px;
	top: 10px;
	right: 0
}
</style>

<div id="login_frame">
	<div class="with-line">这里是中间的文字部分</div>
</div>

效果二代码

<style type="text/css">
ul{ margin:0; padding:0; list-style-type:none;} 
#nav{font-size:12px;padding-bottom:15px;}
#nav li{width:100%; height:30px;}
#nav .item1{width:100%; border-bottom:1px solid #6c6;margin-bottom:-15px;}
#nav li a{width:100%; display:block;color:#666;text-decoration:none;padding:6px 5px;text-align:center;}
#nav li span{background:#FBFBFB; border:1px solid #eeeeee;padding:6px 5px;}
</style>
<ul id="nav">
	<li class="item1"></li>
	<li class=""><a href=""><span>标题1</span></a></li>
</ul>