CSS僞元素很是有用,它提供了一種無需多餘的DOM元素來實現一些常見的功能的方法,如下利用其實現一個帶三角形的tooltip。css
下面是DOM結構:html
<div class="tooltip-wrapper bottom"> <div class="arrow"></div> <div class="content"> This is content </div> </div>
下面是對應的CSS樣式:app
.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.bottom .arrow { top: -11px; left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #7d7d7d; } .tooltip-wrapper.bottom .arrow:after { top: 1px; margin-left: -10px; border-top-width: 0; border-bottom-color: white; }