9 个你不知道的 CSS 伪元素

更新日期: 2023-05-22阅读: 1k标签: 伪元素

CSS 伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的 JavaScript 代码。虽然许多开发人员都熟悉常用的伪元素,例如::before和 ::after,但还有一些其他元素经常被忽视或未得到充分利用。在本文中,我们将探索 9 个鲜为人知的 CSS 伪元素,它们可以增强您的样式设置能力。让我们开始吧!


1.::selection伪元素

伪::selection元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。这是一个例子:

::selection {
background-color: yellow;
color: red;
}

在上面的代码中,当用户在页面上选择文本时,它将以黄色背景和红色文本颜色突出显示。


2.::first-letter伪元素

伪::first-letter元素允许您设置块级元素首字母的样式。当您想将特殊格式应用于段落或标题的初始字符时,它会派上用场。这是一个例子:

p::first-letter {
font-size: 2em;
color: red;
}

在上面的代码片段中,每个段落的第一个字母将以更大的字体显示并显示为红色。


3.::first-line伪元素

与 类似::first-letter,::first-line伪元素以文本或块级元素的第一行为目标。您可以使用此伪元素将特定样式应用于段落或标题的起始行。这是一个例子:

p::first-line {
font-weight: bold;
text-decoration: underline;
}

在上面的代码中,每个段落的第一行将以粗体显示并带有下划线。


4.::marker伪元素

伪::marker元素以列表项的标记为目标,例如无序列表中的项目符号点或有序列表中的数字。使用此伪元素,您可以自定义标记的外观。这是一个例子:

li::marker {
color: blue;
font-weight: bold;
}


5.::placeholder伪元素

伪元素::placeholder允许您在输入字段和文本区域中设置占位符文本的样式。通过将自定义样式应用到占位符,您可以增强用户体验并使其与您的整体设计保持一致。这是一个例子:

input::placeholder {
color: #999;
font-style: italic;
}

在上面的代码中,输入字段中的占位符文本将以浅灰色和斜体字体样式显示。


6.::cue伪元素

伪元素以or元素::cue的提示文本为目标。提示文本通常用于多媒体内容中的字幕或副标题。使用此伪元素,您可以将样式专门应用于提示文本。这是一个例子:<audio><video>

video::cue {
color: white;
background-color: black;
}

在上面的代码中,视频元素中的提示文本将具有白色文本颜色和黑色背景。


7. ::grammar-error和::spelling-error伪元素

和伪元素允许您分别设置标记为语法或拼写错误的文本部分的样式::grammar-error。::spelling-error当内容中存在错误时,这些伪元素可用于向用户提供视觉提示。这是一个例子:

p::grammar-error {
text-decoration: line-through;
color: red;
}

p::spelling-error {
text-decoration: underline;
color: blue;
}

在上面的代码中,段落中的语法错误将以划线文本修饰和红色显示,而拼写错误将以下划线和蓝色显示。


8.::backdrop伪元素

伪::backdrop元素与全屏 API 结合使用,以在全屏模式下自定义元素背后的背景。它允许您将默认的黑色背景更改为自定义颜色或样式。这是一个例子:

video::backdrop {
background-color: gray;
}

在上面的代码中,当一个视频元素处于全屏模式时,它后面的背景将有一个灰色的背景色。


9.::target-text伪元素

如果浏览器支持文本片段,则CSS::target-text伪元素表示已滚动到的文本。它允许作者选择如何突出显示该部分文本。这是一个例子:

::target-text {
background-color: rebeccapurple;
color: white;
}

这是MDN 提供的在线示例。请注意,此 API目前处于试验阶段


结论

CSS 伪元素为元素的特定部分设置样式和增强网页的视觉吸引力提供了广泛的可能性。您无需过多的 JavaScript 代码即可实现令人印象深刻的样式效果。

翻译来自:https://javascript.plainenglish.io/9-css-pseudo-elements-you-didnt-know-about-bb0faa395986

链接: https://www.fly63.com/article/detial/12485

伪元素能做好多事

我们经常遇到图标和文字挨着,不管图标怎么调都很难与文字和谐共处一行,很难实现垂直对齐。这个古老的话题有挺多解决方式的,很多人借助复杂的position: absolute硬调,挺麻烦的,还要写很多代码,不过使用伪元素的话,几行就可以搞定啦!

css伪元素::after和::before,及图标字体的使用

css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?

你可能不知道的CSS 计数器

CSS 里面的伪元素其实是非常好用的,但是经常容易被大家忽略,伪元素里面常用到的 content 属性,可能现在很多人仅仅以为 content 属性的值只支持字符串,除了字符串外常用到的还有 uri、counter ,今天所要介绍的就是 conter(计数器)。

css ::marker伪元素,修改li的项目符号颜色,字号字体

现在,在使用 <ul> 或 <ol> 时自定义数字或项目符号的颜色,大小或类型很简单。利用css的:marker伪元素,我们可以很轻易的更改内容以及项目符号和数字的某些样式。::marker伪元素它作用在任何设置了display:list-item的元素或伪元素上

js如何动态选择和操作 CSS 伪元素,例如 ::before 和 ::after

伪元素用于向某些选择器设置特殊效果。已存在元素是指DOM中存在的,伪元素则是虚拟的一种,样式也是给这个虚拟的元素使用的。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!