今天在做网站视频的时候发现巴萨视频的进度条下方有它自己的logo,随着进度条的显示,隐藏变化。
在给网站添加好播放器后发现他视频进度条下方的logo是伪元素,而我在网站上添加的播放器的进度条是通过JQuery来控制显示和隐藏的,网页的html文件中没有相应的地方可添加。所以网上找教程,一般都是修改样式的。仔细琢磨之后发现其实道理都一样。
下面就来记录一下怎么通过JQuery添加伪元素。
Html代码
(首先写好样式)
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.test {
background:yellow;
}
.box:before{
content: "";
position: absolute;
top: 5%;
margin-top: -1px;
left: 10%;
margin-left: 0.133333rem;
width: 1.786667rem;
height: 20px;
background-color: #ff6600;
border-radius: 0.053333rem;
}
</style>
</head>
<body>
<div class="test">XXX</div>
<div class="box"></div>
</body>
然后通过JQuery 添加伪元素
<script>
$(document).ready(function(){
$(".box").append("<style>.box::before{}</style>");
});
</script>
最后就可以在相应的区域调用到box:before样式了。
不过这有一个坏处,那就是所有class=box的元素都受到影响。
其他方法可以增加class的类或id来实现。
完整代码
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".box").append("<style>.box::before{}</style>");
});
</script>
<style>
.test {
background:yellow;
}
.box:before{
content: "";
position: absolute;
top: 5%;
margin-top: -1px;
left: 10%;
margin-left: 0.133333rem;
width: 1.786667rem;
height: 20px;
background-color: #ff6600;
border-radius: 0.053333rem;
}
</style>
</head>
<body>
<div class="test"> XXX </div>
<div class="box"></div>
</body>