before/after生成的tip类提示效果实例页面

代码：

CSS代码：

.tip{padding:5px 10px; margin-left:15px; border:1px solid #F8D19F; border-radius:3px; background-color:#FDFBB8; color:#D07807; font-size:12px; position:absolute;}
.tip:before, .tip before,
.tip:after, .tip after{content:attr(data-content); font-family:xms; position:absolute; top:6px;}
.tip:before, .tip before{color:#F8D19F; left:-10px;}
.tip:after, .tip after{color:#FDFBB8; left:-8px;}

HTML代码：

<img src="//image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
<span id="tip" class="tip" data-content="&#x25c0;">这是年轻时候的张含韵</span>

JS代码：

var $beforeAfter = function(dom) {
    if (document.querySelector || !dom && dom.nodeType !== 1) return;
    
    var content = dom.getAttribute("data-content") || '';     
    var before = document.createElement("before")
        , after = document.createElement("after");
      
    // 内部HTML
    before.innerHTML = content;
    after.innerHTML = content;
    // 前后分别插入节点
    dom.insertBefore(before, dom.firstChild);
    dom.appendChild(after);
};

$beforeAfter(document.getElementById("tip"));

效果：

这是年轻时候的张含韵