利用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>
注:将来遇到别的效果会更新,其中有些效果未考虑各个浏览器兼容性