伪元素
::after： 在元素后加入内容；
::before： 在元素前加入内容；
Tooltip效果的实现
范例1
使用::before
code：
<div class="tooltip"></div>
.tooltip {
width: 200px;
height: 100px;
border: 1px solid #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(175,175,175,.5);
position: relative;
top: 10%;
left: 10%;
}
.tooltip::before {
content: '';
position: absolute;
top: -40.5px;
left: 41%;
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid rgba(175,175,175,.5);
border-left: 20px solid transparent;
}
使用::after
code:
<div class="tooltip"></div>.tooltip {
width: 200px;
height: 100px;
border: 1px solid #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(175,175,175,.5);
position: relative;
top: 10%;
left: 10%;
}
.tooltip::after {
content: '';
position: absolute;
top: 26px;
left: -40px;
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid rgba(175,175,175,.5);
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
}
范例2
使用::before
code:
<div class="tooptip1"></div>
.tooltip1 {
width: 200px;
height: 100px;
border: 1px solid #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(175,175,175,.5);
position: relative;
top: 10%;
left: 20%;
}
.tooltip1::before {
content: '';
position: absolute;
bottom: -40px;
left: 41%;
display: block;
width: 0;
height: 0;
border-top: 20px solid rgba(175,175,175,.5);
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
}
使用::after
<div class="tooltip1"></div>
.tooltip1 {
width: 200px;
height: 100px;
border: 1px solid #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgba(175,175,175,.5);
position: relative;
top: 10%;
left: 20%;
}
.tooltip1::after {
content: '';
position: absolute;
top: 24px;
right: -40px;
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid rgba(175,175,175,.5);
}
