


What are CSS pseudo-elements? Detailed explanation of CSS pseudo-element usage
什么是伪元素
伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
因为伪元素并不在文档树中,所以通过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
那些 CSS 偽元素可以幫你做的 10 個效果
基于单个 p 的 CSS 绘图
注
块级元素指display的值为block, inline-block, table-cell, table-caption或 list-item中的一个的。
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
The above is the detailed content of What are CSS pseudo-elements? Detailed explanation of CSS pseudo-element usage. For more information, please follow other related articles on the PHP Chinese website!

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Notepad++7.3.1
Easy-to-use and free code editor
