伪元素实现tooltip的效果

伪元素

::after： 在元素后加入内容；

::before： 在元素前加入内容；

Tooltip效果的实现

范例1

使用::before

code：

.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:

.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:

.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

.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);

}