: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);
}

 


posted on   芸芸众生!  阅读(508)  评论(0编辑  收藏  举报

努力加载评论中...
点击右上角即可分享
微信分享提示