流行的简洁风-栏目标题设计

最终效果：

<div class="pub_tit01"> 

     <h2 class="clearfix">

         <p class="fr ebHome_pub_link">

              <a href="http://home.ebrun.com/" target="_blank">社区</a> | 

              <a href="http://www.ebrun.com/blog/" target="_blank">专栏</a>

         </p> 

        <span>社&nbsp;&nbsp;区</span> 

    </h2> 

</div>

.pub_tit01 {
border-bottom: solid 3px #e6e6e6;
}

.pub_tit01 h2 {
font-weight: bold;
}
.pub_tit01 h2 {
font: normal 20px/2em Microsoft YaHei,HELVETICA;
position: relative;
bottom: -3px;
}
.clearfix {
zoom: 1;
}

.ebHome_pub_link {
font: normal 12px/12px SimSun,HELVETICA;
color: #ddd;
margin-top: 18px;
}
.fr {
float: right;
display: inline;
}
 

.pub_tit01 span {
display: inline-block;
border-bottom: solid 3px #0f4784;
}