<div class="showInfo" ref="showInfo" id="showInfo"></div>
<style>
#showInfo {
position: absolute;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.36);
opacity: 0.9;
width: 100;
height: 86px
}
#showInfo:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
top: -13px;
margin-left: -10px;
border-top: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 13px solid rgba(0, 0, 0, 0.36);
}
#showInfo:after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
top: -11.5px;
border-top: 0;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 12.5px solid white;
}
/* #showInfo:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 100%;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 0;
border-top: 13px solid #000;
}
#showInfo:after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 100%;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 0;
border-top: 13px solid white;
} */
</style>
<script>
// document.styleSheets[0].addRule('#showInfo::after', 'top:86px;border-top:12.5px solid white;border-bottom:0');
// document.styleSheets[0].addRule('#showInfo::before', 'top:86px;border-top:13px solid #000;border-bottom:0');
</script>
js 动态修改::before ::after 伪元素样式
最新推荐文章于 2024-05-14 16:25:23 发布