对伪元素::after和::before的理解

:before和:after在css1中就有了，但是在css3中写法改为了::before 和 ::after以便于和之前做区别，用哪种方式无所谓，但是IE8只支持 :after这种写法，所以我平常多用单冒号这种主要能够实现功能有

能够用伪元素实现的功能

1.用来做小三角或者小箭头之类的

具体实现代码

2.为一段儿文字添加代码块

甚至我们能够设置鼠标hover时候的效果

GIF图

具体实现代码

3.hover时的特效

特效1

GIF图

具体实现代码如下

特效2

GIF图

具体实现代码

4.清除浮动

关于浮动的原理和造成的影响，大家可以看此链接，这里只讨论用伪元素after来清除浮动的影响

具体代码如下

5.分割线

具体代码

6.css计数器

css计数器是由css维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数

具体实现代码如下

html结构

css样式

关于css计数器的更具体的用法如下

具体代码如下

html结构

下面是css样式，注意注释部分

css样式

7.画平行四边形

代码如下：

我们发现，里面的字体也变倾斜了，那么如何避免呢？

在div里面嵌套一层也能完全避免

另外一种就是采用:after和:before来写了

咱们先看一下边框设置为20px宽高为0的div长什么样子

具体代码示例

html代码

css样式

对伪元素::after和::before的理解相关推荐

CSS：理解:Before和:After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...
理解css伪类和伪元素
伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的 ...
理解伪元素 :before 和 :after
为什么80%的码农都做不了架构师?>>> 层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一 ...
修改after样式_理解：Before和：After伪元素
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...
理解伪类选择器与伪元素选择器
1. 两个选择器的异同: 伪类选择器是用来向某些选择器来添加效果.不修改DOM内容,通过一些特定的选择器根据特定的状态.特定条件来修改元素的杨氏.比如:悬停(hover).点击(active)以及文档 ...
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
CSS before / after伪元素
CSS伪类对象 after和before的用法 IE对after.before是不支持的,请在firefox.opera.chrome下试调! :before 语法:Selector : before ...
如何使用:before和:after伪元素?
如果你有一直密切关注各个关于网页设计的博客,你大概会注意到,:before和:after伪元素已经在前端开发界得到越来越多的关注,并且是有很好的理由.特别是,有个博主(位于伦敦的一位开发者Nicola ...
【响应式Web前端设计】CSS3伪类与伪元素的区别
首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

对伪元素::after和::before的理解

对伪元素::after和::before的理解相关推荐

最新文章

热门文章