::before和::after的用法
1 ::after清除浮动:
ul:after{ content: ''; display: block;//变成块状元素 width: 0; height: 0; clear: both; }
2 ::before和::after 用来写小三角形
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div class="demo">三角形</div> </body> </html>
css:
*{ margin: 0; padding: 0; } .demo:after{ content: ''; display: inline-block; width: 0; height: 0; border: 8px solid transparent; /*transparent透明*/ border-left: 8px solid #AFABAB; position: relative; top: 2px; left: 10px; }
图:
3 用::after和::before 写一个对话框
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div class="left"> <p>吃了吗?</p> </div> <div class="right"> <p>吃过了,吃了红烧排骨和酸菜鱼。</p> </div> </body> </html>
css:
.left,.right{ min-height: 40px; position: relative; display: table; text-align: center; border-radius: 7px; border: 1px solid #736262; background-color: #9EEA6A; } .right{ /*使左右的对话框分开*/ top: 40px; left: 60px; } .left > p,.right > p{ /*使内容居中*/ display: table-cell; vertical-align: middle; padding: 10px; } .left:before,.right:after{ /*用伪类写出小三角形*/ content: ''; display: block; width: 0; height: 0; border: 8px solid transparent; position: absolute; top: 11px; } /*分别给左右两边的小三角形定位*/ .left:before{ border-right: 8px solid #9EEA6A; left: -14px; } .right:after{ border-left: 8px solid #9EEA6A; right: -14px; }
图示:
4 点击链接出现[]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <style type="text/css"> body{ background-color: #425a6c; } a { position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; font-size: 32px; padding: 5px 20px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "\5b"; left: -10px; } a:hover::after { content: "\5d"; right: -10px; } </style> <body> <a>鼠标移上去出现方括号</a> </body> </html>
图示:
5 多张背景图片的应用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <style type="text/css"> #silverback { position: relative; z-index: 1; min-width: 200px; min-height: 200px; padding: 120px 200px 50px; background: #d3ff99 url(img/vines-back.png) -10% 0 repeat-x; } #silverback:before, #silverback:after { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; padding-top: 100px; } #silverback:before { content: url(img/gorilla-1.png); padding-left: 3%; text-align: left; background: transparent url(img/vines-mid.png) 300% 0 repeat-x; } #silverback:after { content: url(img/gorilla-2.png); padding-right: 3%; text-align: right; background: transparent url(img/vines-front.png) 70% 0 repeat-x; } </style> <body> <div id="silverback">一个标签应用了5张背景图片</div> </body> </html>
6 :自定义边框
查看:点击打开链接
7 给 blockquote 引用段添加巨大的引号作为背景,我们可以用 :before 来代替 background 了,即可以给背景留下空间,还可以直接使用文字而非图片:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <style type="text/css"> blockquote::before { content: open-quote; position: absolute; z-index: -1; color: #DDD; font-size: 120px; font-family: serif; font-weight: bolder; } </style> <body> <blockquote></blockquote> </body> </html>