jQuery如何改变css伪元素样式

回眸只為那壹抹淺笑 提交于 2020-03-02 07:18:13

首先我们看一下css伪元素是什么:

      CSS 伪元素用于向某些选择器设置特殊效果。

伪元素有哪些:

      :first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式。

      :first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式。

      :before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容。

      :after 伪元素:":after" 伪元素可以在元素的内容之后插入新内容。

伪元素例子:

复制代码
 .flow_ball1:after {
                content: "";
                position: absolute;
                top: 50%;
                margin-top: -1px;
                left: 100%;
                margin-left: 0.133333rem;
                width: 1.786667rem;
                height: 2px;
                background-color: #ff6600;
                border-radius: 0.053333rem;
            }在名为flow_ball1的class标签后面添加一道橘色横线(类似于流程图那种)
复制代码

那么,问题来了,怎么用jquery改变伪元素的样式呢?

 

答案在这里:

 $('.flow_ball1').append("<style>#fafang::after{display:none}</style>");

也是千辛万苦找了好久才找到,因为伪元素没有id,也没法给他加id,所以一头雾水,最后在网上看到这个方法,真的很妙,只要在元素前加一个html的style标签,看完真的有一种茅塞顿开的感觉!

 

虽然可能缓慢,但是终将到来。

首先我们看一下css伪元素是什么:

      CSS 伪元素用于向某些选择器设置特殊效果。

伪元素有哪些:

      :first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式。

      :first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式。

      :before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容。

      :after 伪元素:":after" 伪元素可以在元素的内容之后插入新内容。

伪元素例子:

复制代码
 .flow_ball1:after {
                content: "";
                position: absolute;
                top: 50%;
                margin-top: -1px;
                left: 100%;
                margin-left: 0.133333rem;
                width: 1.786667rem;
                height: 2px;
                background-color: #ff6600;
                border-radius: 0.053333rem;
            }在名为flow_ball1的class标签后面添加一道橘色横线(类似于流程图那种)
复制代码

那么,问题来了,怎么用jquery改变伪元素的样式呢?

 

答案在这里:

 $('.flow_ball1').append("<style>#fafang::after{display:none}</style>");

也是千辛万苦找了好久才找到,因为伪元素没有id,也没法给他加id,所以一头雾水,最后在网上看到这个方法,真的很妙,只要在元素前加一个html的style标签,看完真的有一种茅塞顿开的感觉!

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!