:before和:after结合使用

<div class="slider-block" id="block" style="left: 15.5px;" data="11:11"></div>

 

.slider-block:before{
    position: absolute;
    left: 50%;
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    content: attr(data);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    transition: opacity 200ms ease-in-out;
    transform: translate(-50%, -35px);
    opacity: 1;
    color: #fff;
}
.slider-block:after{
    position: absolute;
    top: 0;
    left: 50%;
    content: " ";
    border-top: 4px solid rgba(0, 0, 0, 0.6);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
    transform: translate(-50%, -11px);
}