CSS文字左右两横线效果

演示效果：点我

效果一：

<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>