51
Dev开发社区
首页
文章
问答
工具
搜索
登录
注册
#伪元
[转]你所不知的 CSS ::before 和 ::after 伪元素用法
SS有两个说不上常用的伪类:before和:after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 CreativeLinkEffects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform属性进行变形之外,就是接...
代码星球
·
2021-02-15
你所
不知
CSS
before
after
css before和after伪元素应用
1、说明":before"伪元素可以在元素的内容前面插入新内容。":after"伪元素可以在元素的内容之后插入新内容。伪元素默认展示为inline,即display:inline; 必须写content属性,不然伪类不起作用! 2、兼容性伪元素有2种写法,单冒号和双冒号,单冒号和双冒号作用是一样的。...
代码星球
·
2021-02-14
css
before
after
元素
应用
深入学习css伪类和伪元素及其用法
CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式。[重点]最常...
代码星球
·
2021-01-16
深入
学习
css
类和
元素
常用伪元素及content属性值的使用
1.常用伪元素有after、before,使用方法,如下 a:after{ display:block; content:''; } 2.content:"/0a0";//表示斜杆3.a标签的四个伪类:link /*未被访问的链接*/visited /*已被访问...
代码星球
·
2021-01-02
常用
元素
content
属性
使用
css伪元素::after和::before,及图标字体的使用
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验。 1.定义The css&n...
代码星球
·
2020-12-24
css
元素
after
before
图标
CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
前几天遇到一个页面需求是这样的:一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求:没有文字,没有聚焦——点赞没有文字,聚焦——灰色发送有文字——红色发送如果用js实现,需要监听输入框的change和focus事件,比较麻烦。但是用css中的伪类就可以...
代码星球
·
2020-12-24
CSS
一些
利用
伪类
伪元
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同...
代码星球
·
2020-09-13
CSS3
类和
元素
特性
区别
::before和::after伪元素的用法
css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selecti...
代码星球
·
2020-08-07
before
after
元素
用法
伪元素::before与::after的用法
::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。一、与普通元素一样可以给其添加样式比如说我想在文字前面添加一个图标,如果我用普通元素写的话我可以这样...
代码星球
·
2020-06-14
元素
before
after
用法
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的:-) 根本不能看出有什么区别&...
代码星球
·
2020-05-25
CSS3
伪类
元素
区别
注意事项
深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
我们可以通过计算样式来读取伪元素的样式信息,但是却无法使用javascript来直接操作伪元素,本文以一个需求解决为例,详细介绍脚本化伪元素的6种方法需求说明 【1】为id=box的div元素添加content="前缀"的:before伪元素 【2】为已经添加:before伪元素的div元素删除伪元素 &nb...
代码星球
·
2020-05-24
脚本
深入
理解
CSS
系列
深入理解伪元素
定义 伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现,当然伪元素还包括:first-line,:first-letter和::selection 用法:first-letter ...
代码星球
·
2020-05-24
深入
理解
元素
CSS的伪元素(二)
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉字是统一的,如果要改它们,就都要变的,如,我们希望把建立改为"新建",那么所有的建立...
代码星球
·
2020-04-09
CSS
元素
css的伪元素
这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词;只能与块状元素关联。如下属性可以应用于:first-line伪元素font属性color属性background属性word-spacingletter-spacingtext-dec...
代码星球
·
2020-04-09
css
元素
CSS 伪元素
1.空元素(不能包含内容的元素)不支持::before,::afterIE不支持的元素有:img,input,select,textarea。FireFox不支持的元素有:input,select,textarea。Chrome不支持的元素有:input[type=text],textarea。2.必须设置conten...
代码星球
·
2020-04-08
CSS
元素
首页
上一页
1
2
下一页
尾页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他