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

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

  1. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  2. 学习CSS之如何改变CSS伪元素的样式

    一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 ...

  3. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

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

    曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...

  5. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  6. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

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

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  8. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  9. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

随机推荐

  1. Hyper-V上运行的Linux虚拟机验证是否安装了集成服务

    Hyper-V上运行的Linux虚拟机验证是否安装了集成服务 ps aux|grep "hv"root       311  0.0  0.0      0     0 ?     ...

  2. .NET Core性能测试组件BenchmarkDotNet 支持.NET Framework Mono

    .NET Core 超强性能测试组件BenchmarkDotNet 支持Full .NET Framework, .NET Core (RTM), Mono. BenchmarkDotNet支持 C# ...

  3. appserv 安装php的memcache扩展。

    http://www.cnblogs.com/yiluxiuxing/p/4267709.html 1. 新建一个phpinfo,查看版本号 2. http://museum.php.net/php5 ...

  4. ABP源码分析四十一:ZERO的Audit,Setting,Background Job

    AuditLog: 继承自Entity<long>的实体类.封装AuditLog的信息. AuditingStore: 实现了IAuditingStore接口,实现了将AuditLog的信 ...

  5. PHP中多线程处理

    php多进程处理 往往我们会碰到一个情况,需要写一个脚本,这个脚本要处理的数据量极大,单进程处理脚本非常慢,那么这个时候就会想到使用多进程或者多线程的方式了. 我习惯使用多进程的方式,php中使用多进 ...

  6. xdebug断点调试原理

    通过Xdebug进行远程调试时,PHPSTORM等IDE会监听Xdebug设置的调试ip和端口(php.ini中配置) [xdebug] ; Xdebug zend_extension=php_xde ...

  7. 使用Google Closure Compiler高级压缩Javascript代码注意的几个地方

    介绍 GCC(Google Closure Compiler)是由谷歌发布的Js代码压缩编译工具.它可以做到分析Js的代码,移除不需要的代码(dead code),并且去重写它,最后再进行压缩. 三种 ...

  8. abstract与interface之房祖名张默版

    最近把java基础知识拿出来看看,看到abstract与interface的时候,觉得有点模糊,好像面试官也喜欢问这个问题.我在百度了查了好长时间,觉得讲算比较清楚的是那篇讲 Door,然后想要带个报 ...

  9. C# 复制幻灯片(包括格式、背景、图片等)到同/另一个PPT文档

    C# 复制幻灯片(包括格式.背景.图片等)到同/另一个PPT文档 复制幻灯片是使用PowerPoint过程中的一个比较常见的操作,在复制一张幻灯片时一般有以下两种情况: 在同一个PPT文档内复制 从一 ...

  10. Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)

    <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...