利用after和before实现的一些效果

整理网上利用after和before实现的一些效果(以备用)

1.实现如图所示效果:

.index-notice{height: 45px;line-height: 45px;margin-top: 5px;border-bottom: 1px solid #e5e5e5;position: relative}
.index-notice span{font-size: 14px; font-weight: bold;margin-left: 10px;padding-left: 10px;}
.index-notice span:before{content: "";width: 6px;height: 15px;background-color: #cc0e0e;position: absolute;top:35%;left:8px;}

<div class="index-notice">
    <span>通知公告:</span>
</div>

2.实现ul li 形式的标题栏  用竖线分隔效果

 

nav {height:47px; text-align:center;width: 1100px; background:red;margin:0 auto;margin-top: 2px; }
nav ul { width:1100px; margin:0 auto; }
nav li {width:110px;  height:41px; line-height:41px;text-align:center; float:left;position: relative}
nav li:after{content:"";width: 1px; height: 40%;background-color: #fff;position:absolute;top: 13px;}
nav .last:after { content: "";width: 0px;}



<nav>
    <ul id="nav">
       <li><a href="#" target="_blank">首页</a</li>
       <li><a href="#" target="_blank"></a></li>
       <li><a href="#" target="_blank"></a></li>
       <li><a href="#" target="_blank"></a></li>
    </ul>
</nav>

3.实现空心三角形的效果

.index-notice{height: 45px;line-height: 45px;margin-top: 5px;border-bottom: 1px solid #e5e5e5;position: relative}
.index-notice:before{content: "";position: absolute;top: 100%;right: 18px;width: 0;height: 0px;border-left: 15px solid transparent;border-top:15px solid #e5e5e5;border-right:15px solid transparent;}
.index-notice:after{content: "";position: absolute;top: 100%;right: 19px;width: 0;height: 0px;border-left: 14px solid transparent;border-top:14px solid #fff;border-right:14px solid transparent;}


<div class="index-notice ">
    <span>新闻速递:</span>
</div>

注:将来遇到别的效果会更新,其中有些效果未考虑各个浏览器兼容性

 

posted @ 2017-03-23 16:53  你好,再见  阅读(322)  评论(1编辑  收藏  举报