王鹏飞

Blog

Tutorial

About

CSS

2021年8月18日

伪元素

伪元素的作用是在不添加任何html代码的情况下可以拥有添加额外的元素的功能,或者是指定某个目标元素。你可以在本节学习伪元素的相关知识。

如果你的上司安排给你一个任务,将一篇文章的每个段落的首字母变大,你将如何实现这个功能呢? css伪元素

幸运的是,css恰好提供了这个功能。你可以使用::first-letter实现这个需求。

p::first-letter {
    color: blue;
    float: left;
    font-size: 2.6em;
    font-weight: bold;
    line-height: 1;
    margin-inline-end: 0.2rem;
}

上面的codepen代码,使用了::first-letter伪元素,轻松的实现了上司的需求。CSS拥有很多伪元素,它们都是以::开头的格式,接下来一起看下这些伪元素。

一.::before::after

::before::after这两个伪元素的功能是配合content属性在目标元素内部创建一个子元素,::before在目标元素头部创建一个元素,::after在目标元素尾部创建一个元素。

.ele::before {
    content: "";
}
.ele::after {
    content: "";
}

一旦你使用::before::after创建了伪元素,你可以给这个元素添加样式。但是记住你只能在可以拥有子元素的元素目标上使用::before::after创建伪元素,例如::before::after<img /><video>等无效。

二.::first-letter

在文章最前面,我们使用::first-letter伪元素完成了上司给我们安排的任务。与::before::after不同的是,::first-letter并不会创建一个元素,它指示了目标元素内部的首字母,通过::first-letter,我们可以为目标元素的首字母单独设置样式,就像我们使用::first-letter更改段落的首字母的font-size

但是并不是所有css属性都可以设置,仅可以更改::first-letter指示目标的以下属性:

  • color
  • 背景属性,例如backgroundbackground-imagebackground-color等。
  • 边框属性,例如borderborder-color等。
  • float
  • 字体属性,例如fontfont-sizefont-weight等。
  • 文本属性,例如text-decorationword-spacing等。
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

三.::first-line

顾名思义,::first-line指示目标的首行。例如p::first-line的指示目标是段落的首行。

p::first-line {
    color: red;
    font-weight: bold;
}

::first-letter类似,我们只可以更改部分css属性:

  • color
  • background属性
  • font属性
  • text属性

四.::backdrop

backdrop表示背景幕布的意思。::backdrop指示的就是可全屏元素的背景元素,通过::backdrop可以设置全屏元素背景的样式。可全屏元素有<dialog><video>

看一个例子,感受下::backdrop的作用。

通过::backdrop,将dialog弹出时的背景颜色更改为rgba(100, 10, 10, 0.7);

五.::marker

::marker可以用来修改某些元素的标记符号样式,例如<ul><ol>列表项前面的点和数字,也可以更改<summary>前面的内容。

可支持::marker修改的css属性有:

  • color
  • content
  • white-space
  • font属性
  • animationtransition属性

六.::selection

::selection允许你修改选中的文本样式。

::selection {
    background: green;
    color: white;
}

::selection支持修改的css属性有:

  • color
  • background-color属性,不支持background-image
  • text相关属性

七.::placeholder

在使用<input>元素时,通常会添加一个placeholder属性提示用户输入。::placeholder伪元素用于更改提示文字(placeholder)的样式。

支持修改的css属性如下:

  • color
  • background相关属性
  • font相关属性
  • text相关属性

附:参考资料

(完)

留言(0


发表评论

邮箱地址不会被公开。*表示必填项