jQuery如何改变css伪元素样式

首先我们看一下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标签,看完真的有一种茅塞顿开的感觉!

时间: 2024-10-12 13:03:50

jQuery如何改变css伪元素样式的相关文章

JavaScript修改CSS伪元素:after和:before的样式

CSS伪元素:before和:after可以实现很多有趣的功能,我们项目中使用的ionicframework框架的ionic.css文件中大量使用到了这2个伪元素.伪元素可以用来定义样式,但是和正常的dom元素不同,我们没有办法选中这些伪元素,也就不能像普通元素那样来修改它. <head> <style> .content{ margin-top:100px; } .content:before{ content:'target-before'; color:#33B5E5; po

用CSS伪元素制作箭头

现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用display来改变,before和after是在CSS2的新特性(现在已经老了),浏览器对其兼容性还未了解. 实现代码如下: 1 <!--CSS样式,在项目中可以把相同的属性与属性值对写在一起,这里是方便学习--> 2 <style> 3 .divtest{ 4 position: ab

js如何控制css伪元素内容(before,after)

原文:js如何控制css伪元素内容(before,after) js如何控制css伪元素(before,after) @(CSS 笔记)[伪元素|css3]曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗暴的方式: 简单粗暴的方式,直接在html中添加样式覆盖掉之前样式规则 <style> p:after{content:'我是后缀'} <

CSS伪元素before和after

今天发现很多国外的网站和框架设计都用到了before和after,之前使用的比较少,今天试了下觉得还是很有意思的~ 说明 1. :before 和 :after将在内容元素的前后插入额外的元素::before将会在内容之前"添加"一个元素而:after将会在内容后"添加"一个元素.在它们之中添加内容我们可以使用content属性. 2. :before 和 :after发布于CSS2.1, 在css3中修订后伪元素使用::,伪类使用:, 因而形式为:: before

CSS——伪元素

CSS伪元素 伪元素的语法: selector:pseudo-element {property:value;} 作    用 添加特殊样式 :first-line 伪元素 "first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式: p{font-size: 12pt}p:first-line{color: #0000FF;font-variant:small-caps;}<p>Some text that ends up on two or more l

css 伪元素 :hover :active :before :after :visited :link :focus ...

CSS 伪元素 所有CSS伪类/元素 选择器 示例 示例说明 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接(点击后的效果) :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个<p> 元素的第一个字母 :first-line p:first-line 选择

CSS伪类与CSS伪元素的区别及由来

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准

CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式. 在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行

转贴:CSS伪类与CSS伪元素的区别及由来具体说明

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:“这两个是不同的”,也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章