本文已参与掘金创作者训练营第三期「话题写作」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力
我们在实际工作中经常用的两个伪元素, 或许大家都知道, 因为用的比较多, 那就是 ::before
和 ::after
,
其实最开始较早的还是 ::first-letter
这个伪元素, 大家能够在比较早的文档/新闻等页面中见得到(现代网页中逐渐被淘汰了: 可能并不是太好看吧..), 那就是文章第一个文字特别大(有脑补画面了吧)占据两行甚至更大.
下面来具体学习下 CSS 中的伪元素..
0. 从最开始的 清除浮动的方法 说起:
清除浮动(虽然现在慢慢用少了有没有), 最常用也是最为推荐的方案之一: 就是使用 ::aftter
这个代表一个元素之后最近的元素,
给浮动元素的容器添加一个类名 .clearfix
, 然后给这个 class
添加一个 ::after
伪元素实现元素末尾添加一个看不见的块元素(Block element)并设置如下样式 来清除浮动。
(关键样式: clear:both
)
.clearfix::after {
content: '';
display: block;
width: 0;
height: 0;
clear: both;
}
1. 什么是伪元素?
1.1 定义
pseudo-element
名为 伪元素
, 顾名思义它不是真正的元素, 是一个假元素, 通过 CSS 设置来使用, 并可被客户端用户看到: 通过设置属性 content: '要显示的内容'
, 来显示其内容
CSS 中伪元素用于设置元素指定部分的样式。(前后 / 开头 / 选中). 默认为内联元素, 如果想设置宽高, 则须要设置其为块元素: display: block
1.2 作用:
伪元素 可用于:
- 设置元素的首字母、首行的样式
- 设置在元素的内容之前或之后插入的内容
- 设置选中元素的样式: 比方常用的选中文本的背景颜色
2. 伪元素 的 使用语法:
/* 选择器::伪元素 { 样式属性 } */
selector::pseudo-element {
property: value;
}
3. CSS 中的伪元素 分类:
最常用的 莫过于 ::before
和 ::after
了吧,
所有 5 个 CSS 伪元素列表:
# | 伪元素 | 示例 | 效果例子描述 |
---|---|---|---|
1 | ::before | h1::before | 在每个 <h1> 元素之前插入内容 |
2 | ::after | h1::after | 在每个 <h1> 元素之后插入内容 |
3 | ::first-letter | article::first-letter | 选择每个 <article> 元素的首字母 |
4 | ::first-line | article::first-line | 选择每个 <article> 元素的首行 |
5 | ::selection | div::selection | 选择用户选择的元素部分(通常为文本) |
从字面上理解, 上述中的插入内容到 元素之前
和 元素之后
, 但这个 之前和之后
有点小问题,
并不是我们的直觉理解的: 注入的内容将会被插入到目标元素的子元素的前或后,但它会被插入到目标元素下的所有内容的“前”或“后”。
3.1 CSS ::before
伪元素
::before
伪元素可用于在元素内容之前插入一些内容。
如下面的例子在每个 <h1>
元素的内容之前插入一背景图像:
示例中图片为 掘金logo
简单的设置一个图片:
h1::before {
content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
通过背景设置, 则需要设置的属性比较多了:
还可以设置图片的位置: position
, 这里没有列举:
h1::before {
content: '';
display: block;
width: 32px;
height: 32px;
background-size: 100% 100%;
opacity: 0.36;
background-repeat: no-repeat;
background: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
3.2 CSS ::after
伪元素
::after
伪元素可用于在元素内容之后插入一些内容。
如下面的例子在每个 <h1>
元素的内容之后插入一幅图像:
示例: 同理 ::before
h1::after {
content: url(https://cdn.jsdelivr.net/gh/xn213/img-hosting@master/juejin-posts-imgs/juejiin-logo-small.bysnpjh9yls.png);
}
3.3 ::first-letter
伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。
下面的例子设置所有 <p>
元素中文本的首字母格式:
示例:
p::first-letter {
color: #b45dea;
font-size: xx-large;
}
注意:::first-letter 伪元素只适用于块级元素。
下面的属性适用于 ::first-letter
伪元素:
- 字体属性
- 颜色属性
- 背景属性
- 外边距属性
- 内边距属性
- 边框属性
- text-decoration
- vertical-align
(仅当 "float" 为 "none")
- text-transform
- line-height
- float
- clear
伪元素和 CSS 类名
伪元素可以与 CSS class 类名 结合使用:
示例:
p.intro::first-letter {
color: #b45dea;
font-size: 200%;
}
上面的例子将以红色和较大的字体显示 class="intro" 的段落的首字母。
多个伪元素 也可以组合几个伪元素。
在下面的例子中,段落的第一个字母将是红色,字体大小为 xx-large。第一行的其余部分将变为蓝色,并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色:
::first-letter
示例:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
3.4 ::first-line
伪元素
::first-line
伪元素用于向文本的 首行 添加特殊样式。
下面的示例例为所有段落 <p>
元素中的首行添加样式:
示例:
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
注意:
::first-line
伪元素只能应用于块级元素。
适用于 ::first-line
伪元素的属性:
- 字体属性
- 颜色属性
- 背景属性
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
伪元素的书写方式:
请注意 双冒号表示法
- ::first-line
对比 :first-line
在 CSS3 中,双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中,伪类和伪元素都使用了单冒号语法。
为了向后兼容,CSS2 和 CSS1 伪元素可接受单冒号语法。
3.5 CSS - ::selection
伪元素
::selection
伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用于 ::selection
:
- color
- background
- cursor
- outline
下面示例使用户所选择的文本在黄色背景上显示为指定颜色:
::selection
示例:
::selection {
color: #fff;
background: #b45dea;
}