css的after右箭头,CSS3 使用伪元素after/before创建带箭头的提示信息框

CSS

语言：

CSSSCSS

确定

body{font-family:microsoft yahei;}

.help {

width: 23px;

height: 23px;

color: #fff;

background-color: #b4b4b4;

display: inline-block;

border-radius: 100%;

text-align: center;

line-height: 23px;

margin-top: 18px;

margin-right:12px;

cursor:pointer;

}

.ex_fee{text-align:center;margin-top:60px;position:relative}

.fee_p{display:inline-block;}

.readme{padding:8px 16px;background:#fff;border-radius:5px;border:1px solid #dcdcdc;position:absolute;right:52px;top:-58px;z-index:-99;opacity:0;}

.readme.fade{-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear;transition:all 0.5s linear;}

.readme p{line-height:21px;font-size:12px;}

.readme:before{

content: "";

position: absolute;

bottom: -24px;

right: 410px;

border-style: solid;

border-width: 12px;

border-color: transparent;

border-top-color: #dcdcdc;

}

.readme:after{

content: "";

position: absolute;

bottom: -20px;

right: 412px;

border-style: solid;

border-width: 10px;

border-color: transparent;

border-top-color: #fff;

}

.help:hover+.readme{opacity:1;z-index:999}