::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>
1181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
