CSS伪元素介绍

什么是伪元素

伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

因为伪元素并不在文档树中,所以通过JS,也抓取不到伪元素,也不能给它绑事件。

语法

伪元素以::开头。

在CSS1和CSS2中,伪元素和伪类一样,都是用:开头。但在CSS3中,伪元素以::开头,用以和伪类进行区分。

IE8不支持::。因此如果要兼容IE8,只能用:

常见的伪元素

::before

在当前元素的内容的前面插入一个子元素。插入的元素为内联元素。

需要注意的是,使用::before时, 必须使用content来指定子元素的内容。 例如:

.element::before {
    content: "Note: "; /* 字符串 */
}

.element::before {
    content: attr(title); /* 元素的title属性 */
}

.element::before {
    content: url(path/to/image.png); /* 一个图片 */
}

.element::before {
    content: "\201C"; /* Unicode转义的一个字符 */
}

更详细的介绍见这里

::after

在当前元素的内容的后面插入一个子元素。 其他和 ::before类似。

::first-line

选择当前元素的第一行。 需要注意的是,其只作用于块级元素[注1]。

对::first-line只能使用下面的样式

  • Font: font, font-style, font-variant, font-weight, font-size, line-height和font-family.
  • Background: background, background-color, background-image, background-position, background-repeat, background-size和background-attachment
  • text-decoration, text-transform, letter-spacing和word-spacing

因此,对::first-line使用margin和padding是无效的。

更详细的介绍见这里

::first-letter

选择第一个字母。 更详细的介绍见这里

::selection

选中当前元素中,选中的文字。

selection.png

对::selection的只能使用 color, background-color和text-shadow这几个属性。

什么时候用伪元素

HTML 标签的目的,就是为了展示内容信息。非内容信息要使用伪元素。

具体的使用场景是图标和清除浮动。

所谓的非内容信息,指的是一些对内容进行修饰的信息。

如下图,登录按钮左边的图标是对登录的说明,为非内容信息。

登录按钮.png

如下图,用红框框起来的小图标表示,点击左边的链接,会在新窗口打开。也是非内容信息。

外链.png

demos

  1. 块级元素指display的值为block, inline-block, table-cell, table-caption或 list-item中的一个的。

相关文章

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

1K10
来自专栏练小习的专栏

可视化格式模型-包含块

一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说,元素的包含块就是它的父...

20680
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

39150
来自专栏木子昭的博客

<布局>子级相对级居中对齐的几种方式

? 一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50...

29840
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

23800
来自专栏天天

20171024

11930
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

7320
来自专栏超然的博客

CSS 居中

给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实...

11910
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,...

21870
来自专栏hightopo

原 快速创建 HTML5 Canvas 电

23520

扫码关注云+社区

领取腾讯云代金券