使用伪类before和after
Posted Zz喵
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用伪类before和after相关的知识,希望对你有一定的参考价值。
对于伪类before和after的使用,完整地讲是不知道怎么使用,除开最基本对元素前后添加内容之外,可以使用这两个伪类的CSS属性达到令人满意的效果。
1、添加元素内容:
<!DOCTYPE html> <html> <head> <title>添加元素内容</title> <meta charset="utf-8" /> <style> p{ padding: 20px;} p:before{content: "我是before添加的内容"; font-weight: bold;} p:after{content: "我是after添加的内容"; font-style: italic} </style> </head> <body> <p>我是元素里面的内容</p> </body> </html>
在这里添加了元素内边距,判断before和after的位置是包含在content之中还是之外,结果如下:
我是元素里面的内容
可以看到,元素添加的内容实在content之中,并且对于伪类样式的设置,不会影响到元素的样式。
2、展示列表的hover特效:
<!DOCTYPE html> <html> <head> <title>展示边框出现效果</title> <meta charset="utf-8" /> <style> .hover>li{ position: relative; float: left; width: 80px; list-style: none; text-align: center; } .hover>li:before{ content: ""; border-bottom: 2px solid #5ac; position: absolute; top: 20px; width: 0; left: 50%; transition: all linear .5s; padding-bottom: 20px; } .hover>li:hover:before{ position: absolute; width: 100%; top: 20px; left: 0; } </style> </head> <body> <ul class="hover"> <li>01组</li> <li>02组</li> <li>03组</li> </ul> </body> </html>
上面的代码中,content,top及值,width,padding-bottom,transition都是必不可少的,只要有一点偏差就不能达到想要的效果。结果如下:
- 01组
- 02组
- 03组
3、由于这两个伪类属于元素的content部分,所以可以用来对元素进行边框外形的设置:
<!DOCTYPE html> <html> <head> <title>设置边框样式</title> <meta charset="utf-8" /> <style> .border{ position: relative; width:150px; height: 36px; border:1px solid black; border-radius:5px; background: #eee; margin-left: 50px; } .border:before,.border:after{ content: ""; display: block; position: absolute; top:8px; width: 0; height: 0; border:6px solid transparent; } .border:before{ left:-11px; border-right-color: #eee; z-index:1 } .border:after { left: -12px; border-right-color: black; z-index: 0 } </style> </head> <body> <div class="border"></div> </body> </html>
通过before和after的定位,利用位置差值和颜色差异,将突出的小角展示出来。结果如下:
各种元素和css属性都是神通广大,只需要我们多试验,多发掘!
以上是关于使用伪类before和after的主要内容,如果未能解决你的问题,请参考以下文章