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 条评论
登录 后参与评论

相关文章

  • 学习纲要:CSS 布局

    Joel
  • 学习前端 第6周 第3天

    Joel
  • 学习纲要:DOM

    Joel
  • Linux下快速安装Python3和pip

    如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境,

    sunsky
  • 在未知大小的父元素中设置居中

    当提到在web设计中居中元素时。关于被居中的元素和它父元素的信息,你知道的越多就越容易设置。那么假如当你不知道任何信息?居中也是可设置的。

    lesM10
  • 融合之下的想象:影视众筹的未来在哪?

    孟永辉
  • ionic3 极光推送

    极光推送 官网:https://www.jiguang.cn/push 注册账号,创建应用,记录AppKey, 应用包名与ioinic 包名一致(confi...

    余生
  • 编程题:百钱买百鸡

    #### 案列说明:主要内容是:公鸡5元一只,母鸡3元一只,小鸡1元三只,问100元怎样可以买100鸡?

    用户6182664
  • UG10.0制图模块修改标注设置的技巧

    最近有朋友在问,为什么ug10.0制图里面设置方法和ug8.0差别这么大,突然不知道怎么用了。比如修改一个电极图纸的标注格式,或者标注的字体大小。我们在使用习惯...

    UG数控编程
  • Oracle SQL性能优化40条,值得收藏

    语法分析> 语义分析> 视图转换 >表达式转换> 选择优化器 >选择连接方式 >选择连接顺序 >选择数据的搜索路径 >运行“执行计划”

    数据和云

扫码关注云+社区

领取腾讯云代金券