CSS偽元素非常有用，它提供了一種無需多余的DOM元素來實(shí)現(xiàn)一些常見的功能的方法，以下利用其實(shí)現(xiàn)一個帶三角形的tooltip。

下面是DOM結(jié)構(gòu)：
下面是對應(yīng)的CSS樣式：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="tooltip-wrapper bottom">    
    <div class="arrow"></div>    
    <div class="content">    
        This is content    
    </div>    
</div>   

CSS Code復(fù)制內(nèi)容到剪貼板

.tooltip-wrapper {    
    position: absolute;    
    z-index: 9999;    
    padding: 5px;    
    background: white;    
    border: 1px solid #7d7d7d;    
    border-radius: 5px;    
}    
.tooltip-wrapper .arrow,    
.tooltip-wrapper .arrow:after {    
    position: absolute;    
    display: block;    
    width: 0;    
    height: 0;    
    border-color: transparent;    
    border-style: solid;    
}    
.tooltip-wrapper .arrow {    
    border-width: 11px;    
}    
.tooltip-wrapper .arrow:after {    
    content: "";    
    border-width: 10px;    
}    
.tooltip-wrapper.bottombottom .arrow {    
    top: -11px;    
    left: 50%;    
    margin-left: -11px;    
    border-top-width: 0;    
    border-bottom-color: #7d7d7d;    
}    
.tooltip-wrapper.bottombottom .arrow:after {    
    top: 1px;    
    margin-left: -10px;    
    border-top-width: 0;    
    border-bottom-color: white;