用户登录

Pseudo-elements,伪元素,它指的是元素的某个部分。在设计样式的时候,可以使用 CSS 提供的一些关键词创建所选元素的伪元素。

比如我想在这个标题的上面还有下面添加点样式,这些样式可能需要添加额外的元素,或者我们也可以使用 ::before 还有 ::after 这两个关键词,在选中的元素里创建两个伪元素。用 ::before 创建的伪元素表示所选元素里的第一个子元素,用 ::after 创建的伪元素表示的是所选元素里的最后一个子元素。

先修改一下 HTML 文档,在这个标题元素的上面添加一个类,名字可以设置成 title。在文档的样式表里,我们用这个类去给这个标题设计样式。

::before

先用 .title 这个类选择器,然后是 ::before 这个关键词,注意创建伪元素用的这些关键词的名字里面,都会使用两个冒号作为前缀。

默认创建的伪元素都是行内元素,在这块样式里,我们先用 display 把元素变成一个块级元素,把它的值设置成 block。然后可以用 content 这个属性在元素里添加点内容,可以添加几个波浪符号。再用 line-height 把行高设置成 1,然后用 font-size 把字号设置成 16 像素。

现在这个标题的上面就会出现一些波浪号,这块内容在这个标题元素的 before 这个伪元素里面。

::after

复制一份这块样式,把 before 改成 after,它会在选中的元素里创建一个伪元素,这个 after 伪元素是元素的最后一个子元素。现在标题的下面也会出现一些波浪符号,这些内容在元素的 after 这个伪元素里面。

用开发者工具检查一下这个标题元素,在元素的上面会显示有一个 ::before 伪元素,在它的下面,会显示 ::after 这个伪元素,选中这个伪元素可以检查应用在它上面的样式。

选择器列表

样式表里现在有两块样式是一样的,这种情况我们可以使用选择器列表定义这块样式,复制一下 .title::after 这个选择器,再把这块样式删除掉,然后在上面这块样式的选择器的后面,添加一个逗号,再把复制的选择器粘贴到这里,意思就是这两个选择器选中的元素,共同拥有这块样式。

CSS 伪元素:元素的某个部分(::before, ::after)《 Web 基础:样式基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点