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标签,看完真的有一种茅塞顿开的感觉!
jQuery如何改变css伪元素样式的更多相关文章
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- 学习CSS之如何改变CSS伪元素的样式
一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下: selector:pseudo-element {property:value;} CSS 类也可以和伪元素搭配使用 ...
- css:hover状态改变另一个元素样式的使用
效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
- js如何控制css伪元素内容(before,after)
曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗 ...
- 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- (六)CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...
- CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...
随机推荐
- /etc/ppp/chap-secrets
# Secrets for authentication using CHAP # client server secret IP addresses abc l2tpd * client:VPN 用 ...
- HTML 学习笔记 JQuery(DOM 操作2)
接着上一节的将,这一节从复制节点讲起 复制节点 继续使用之前的例子 如果单击<li>元素后 需要在复制一个<li>元素,可以使用clone()方法完成.全部代码如下 <h ...
- Yeoman 学习笔记
yoeman 简介:http://www.infoq.com/cn/news/2012/09/yeoman yeoman 官网: http://yeoman.io/ yeoman 是快速创建骨架应用程 ...
- xamarin绑定原生库的一些坑
最近一个项目涉及到较多的第三方库的绑定技术,中间遇到了几个坑,记录下来与大家分享 绑定Jar库 monoandroid对原生库的调用都通过Android.Runtime.JNIEnv进行调入(http ...
- js变量声明作用域问题
1.先来看两个题 var a = 1; foo1(); function foo1(){ console.log(a); //输出1 }; foo2(); var a = 1; function fo ...
- VMware下Windows Server 2012添加新磁盘
系统管理员在VM下新装了一台Windows Server 2012服务器,我在上面安装了SQL Server 2014 Standard版数据库,安装之初,只分配了一个C盘,我想在这台服务器上添加了三 ...
- Python标准模块--built-ins函数
1.Python内置函数 2.Python内置函数举例 2.1 数学运算 abs,计算绝对值: >>> abs(-1) 1 >>> abs(3) 3 round,四 ...
- 浅谈系列之 javascript原型与对象
在我学习与使用javascript三个月中,我一直对javascript的继承关系以及prototype理解不清,导致很多时候为什么这么用说不出个所以然来.截止到本周为止,通过之前的学习以及自己的再学 ...
- 放弃安卓原生TimePicker,选择wheelView打造更漂亮的时间get,以及动态拉伸输入框布局,这些,这里都有!
最近公司要求的上线项目有这么一个需求,要写一个请假申请的页面,里面必须有请假开始时间,结束时间,还有一个请假原因. 于是想到时间选择嘛,官方不是有个DatePicker吗?额,是不是要DatePick ...
- Windows Programming ---- Beginning Visual C#
span.kw { color: #007020; font-weight: bold; } code > span.dt { color: #902000; } code > span. ...