首先我们看一下css伪元素是什么:
CSS 伪元素用于向某些选择器设置特殊效果。
伪元素有哪些:
:first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式。
:first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式。
:before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容。
:after 伪元素:":after" 伪元素可以在元素的内容之后插入新内容。
项目中遇到的案例:
.topo-db-float:before {
content: '';
position: absolute;
top: -6px;
left: 12px;
width: 10px;
height: 10px;
border-top: solid 1px #DCDCDC;
border-left: solid 1px #DCDCDC;
transform: rotateZ(45deg);
background-color: #fff;
}
现在有需求需要通过不同的环境对CSS作动态修改,那么问题来了,怎么用jquery改变伪元素的样式呢?
$('.topo-db-float').append("<style>#dbFloatBox::before{top:93px}</style>");
通过上面代码可以给class为 topo-db-float 标签中top设置为93px
设置前:
设置后显示为: