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

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

 

转载于:https://www.cnblogs.com/wyynts/p/6606013.html