css的伪元素::after和::before

// 转载自:浅谈css的伪元素::after和::before

css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。

但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验。

一、概念:

1.定义

从定义我们知道::before和::after匹配一个虚拟元素,主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性,默认是内联元素。

其实::after和::before被引入css中,最核心的目的,还是为了实现语义化。在我们实际开发时候经常有这样的经历,为了实现一些效果,在文档中创建了一些没有实际内容的节点,或者加入辅助样式的文本,如:

复制代码

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
</style>
<nav>
    <ul>
        <li>HTML 5</li>
        <li>|</li>
        <li>CSS3</li>
        <li>|</li>
        <li>JavaScript</li>
    </ul>
</nav>

复制代码

显示的时候是这样子的:

很明显,例子中的“|”仅是显示时候用的间隔符,没有实际的意义,而他所在的li元素仅是为了装饰才被创建的,本是不应该被创建在文档内的。那么能不能由样式(css)去创建出节点把他们代替掉呢?

出于这样的需求,就诞生了::after和::before,这两个伪元素相当于是对当前元素的装潢,他们并不是节点,不会出现在dom树中,但是在显示上具备节点的效果。

我们使用::after和::before重构一下上边的代码:

复制代码

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
    li:not(:last-child)::after{
        content: "|";
    }
</style>
<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

复制代码

显示效果没有变化,但是文档结构变得清晰了多了。

2.使用

::after和::before的使用很简单,可以认为其所在元素上存在一前一后的两个的元素,这两个元素默认是内联元素,但我们可以为其增添样式。::after和::before使用的时候一定要注意,必须设置content,否则这两个伪元素是无法显示出来的。而content属性,会作为这两个伪元素的内容嵌入他们中。如:

复制代码

<style>
    p:before{
        content: "H";
    p:after{
        content: "d";
    }
  </style>
  <p>ello Worl</p>

复制代码

显示为完整的Hello World。

::after和::before是虚拟元素,不会影响真正元素的所在文档的位置,对:first-child或者:last-child这种伪类选择不会造成影响。

3.操作

::after和::before是虚拟节点,而不是正在的节点,不在documont里面找到对应Node对象,在之前的例子中,我们执行下列js代码:

console.log( document.querySelector("ul").childNodes);

得到的是一个只有3个节点的NodeList对象,而两个伪元素并不在对象中。因为::after和::before不是真正的节点,所以我们取不到他们,也不发设置点击等用户事件。::after和::before虽然是不能设置事件,但还会捕获用户事件,并把事件“冒泡”到伪元素所在的元素上。之所以“冒泡”二字加了引号,是因为他不是真的冒泡,更准确的说::after和::before帮所在元素去捕获去事件,事件的srcElement对象是伪元素所在的元素,而不是伪元素本身。

document不能获取到::after和::before所对应的节点对象,但是可以通过css的接口获取其样式属性,如:

window.getComputedStyle(
    document.querySelector('li'), ':before'
)

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

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

具体实现代码

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

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

3.hover时的特效

特效1

具体实现代码如下

4.清除浮动

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

 

5.分割线

 

6.css计数器

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

 

html结构

 

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

7.画平行四边形

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

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

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

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

 

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: CSS中的:before和:after是元素,可以用来在元素的前面或后面插入内容。 :hover是CSS中的类,表示当鼠标悬停在元素上时应用的样式。 综合起来,可以使用:before和:after元素来在元素的前面或后面插入内容,并使用:hover类来在鼠标悬停时应用样式。 ### 回答2: CSS是一种样式语言,用于为网页添加样式和设计。CSS提供了许多强大的功能,包括:before、:hover和:after类。这些类为网页提供了更多的设计选项,使其更具吸引力和专业性。下面我们分别来讲解这三个类。 :before:是一个类,用于在元素的内容前插入内容。通过使用:before类,我们可以为网页加上漂亮的样式,例如很流行的下划线效果、图标等。使用它可以做出很多有趣的效果,可以添加类似于文字前缀、标签符号等的样式。 :hover:通常用于鼠标悬停在链接、按钮等上时的样式改变。它允许我们在用户使用鼠标悬停在一个元素上时改变它的样式。我们可以用它来改变文本的颜色、背景颜色、添加阴影、缩放、旋转等,增强用户交互性和视觉效果。 :after:是一个类,用于在元素的内容后插入内容。它的使用与:before类似,在元素之后添加内容,可以用此达到一些特殊的效果,比如为元素添加类似于引用结尾标志等样式。 这三个类中,使用最广泛的是:hover类,因为它可以增强用户的交互体验,并且在网页设计中应用非常广泛。虽然:before和:after这两个类在使用时更加复杂,但如果使用得当,可以为网页带来一些非常独特和有用的效果。 总之,通过这三个类的使用,我们可以在网页设计中更加创意和细致,在用户界面上增加更丰富的功能和表现形式,为用户提供更好的体验。 ### 回答3: CSS是层叠样式表的简写,是一种用来设计网页页面样式的语言。CSS包括一系列的选择器和声明块,可以用来控制HTML页面的布局、字体、颜色和其他元素的显示效果。其中常用的选择器包括`:before`、`:hover`和`:after`。 `:before`元素 `:before`元素可以在被选元素的内容前面添加一个内容或样式。它可以用来设置页面的样式或生成页面的一些元素。比如,可以用`:before`选中一个元素并为其添加一个箭头。 `:hover`类 `:hover`类指的是鼠标指针悬停在一个元素上的状态。通常,我们会用它来改变元素的样式,比如改变文字颜色、背景颜色以及元素的透明度等。 `:after`元素 `:after`元素可以在被选元素的内容后面添加一个内容或样式。它通常用于在一个元素后面添加一些可用来提示用户的文字或图标等。比如,可以用`:after`选中一个按钮并为其添加一个小箭头,用来提示用户该按钮可以展开或缩起。 总的来说,CSS中常用的选择器包括`:before`、`:hover`和`:after`,它们可以通过设置元素的样式和生成元素的方式来为网页设计提供更多的可能性。掌握这些选择器可以让我们在设计网页是变得更加得心应手。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值