通过JQuery增加伪元素:before,:after的方法

最新推荐文章于 2024-02-11 11:17:00 发布

正在秃中

最新推荐文章于 2024-02-11 11:17:00 发布

阅读量4.6k

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46530861/article/details/105349933

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天在做网站视频的时候发现巴萨视频的进度条下方有它自己的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>

正在秃中

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
通过JQuery增加伪元素:before,:after的方法

今天在做网站视频的时候发现巴萨视频的进度条下方有它自己的logo，随着进度条的显示，隐藏变化。在给网站添加好播放器后发现他视频进度条下方的logo是伪元素，而我在网站上添加的播放器的进度条是通过JQuery来控制显示和隐藏的，网页的html文件中没有相应的地方可添加。所以网上找教程，一般都是修改样式的。仔细琢磨之后发现其实道理都一样。下面就来记录一下怎么通过JQuery添加伪元素。Html代...
复制链接

扫一扫