伪元素

CSS中的伪类与伪元素：让样式更加灵活优雅

CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。

·2025-03-19 21:00

css3-学习

important>内联样式(style=“”)>ID选择器>类选择器=属性选择器=伪类>标签选择器=伪元素选择器。

江西谢霆锋·2025-03-18 03:38

【CSS 面经】如何画一条 0.5px 的线 ️

二、实现0.5px线条的几种方法1.使用`transform:scale()`实现缩放2.使用`border`和`transform`结合3.使用`box-shadow`实现0.5px4.使用伪元素`:

Peter-Lu·2025-03-15 23:41

前端CSS：CSS画一条0.5px的线的方法

前端CSS：CSS画一条0.5px的线的方法引言基本概念和作用说明基本概念作用说明示例一：使用`transform:scale()`方法代码示例说明示例二：使用透明度技巧代码示例说明示例三：使用伪元素代码示例说明示例四

DTcode7·2025-03-15 23:40

css选择器第三章(伪元素/选择器优先级/三大特性)

css伪元素/选择器优先级/三大特性一、css伪元素选择器该选择器跟之前的不同，元素选择器操作的是元素里面的内容，伪类操作的是元素本身（只能操作类似于div，p标签等等这些标签元素）。

星空寻流年·2025-03-06 11:37

Vue F05 -- 伪类元素

CSSQuery不能通过$("：before")、$(dom).find(":before")、document.querySelector(“:before”)来获取:before为元素伪元素（Pseudo-elements

Toreme·2025-03-03 20:17

“伪元素”是啥

“伪元素”是啥CSS伪元素（Pseudo-elements）是一种特殊的CSS选择器，允许开发者在不修改HTML结构的前提下，通过样式表操作元素的特定部分或插入虚拟内容。

向贤·2025-03-01 08:29

css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框

前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。

weixin_39953102·2025-03-01 04:59

CSS 伪类和伪元素的混淆

在CSS中，伪类和伪元素是两个不同的概念。它们的作用是相似的，都用于对元素进行样式修饰，但它们的使用方式和语法有所不同。

神明木佑·2025-02-21 21:58

CSS选择器（基本选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器、选择器权重及优先级）总结

CSS选择器一、通配符选择器*作用：选中页面中所有的元素,如下案例是给页面中的具有margin和padding的元素去除默认的内外边距。*{padding:0;marginn:0;}二、基本选择器1、id选择器作用：通过id属性的值选择元素#pid{color:#ff0000;}段落内容2、类选择器.作用：通过元素的class属性值选中元素。.box{color:#ff0000;}.fontSiz

shuimoguzhou·2025-02-21 20:22

html实现背景颜色透明，文字效果不透明

html实现背景颜色透明，文字效果不透明通过伪元素的方式添加遮罩层（给背景颜色，层级，透明度，定位）即可，弹窗原理。

快乐的二进制鸭·2025-02-21 06:55

揭秘 CSS Houdini：用浏览器魔法解锁 CSS 的终极潜力

wave-border{position:relative;overflow:hidden;}.wave-border::after{content:'';position:absolute;/*需要复杂计算和多个伪元素拼接

寒鸦xxx·2025-02-20 14:50

少数人知道的 10 个神奇 CSS 选择器

大多数人熟悉ID选择器、类选择器或元素选择器，甚至伪元素的使用也很常见。然而，你知道CSS其实还有许多不为人知的强大选择器吗？

·2025-02-14 09:07

[css] 如何用css控制border 的长度？

533_·2025-02-12 02:09

使用 CSS 的 `::selection` 伪元素来改变 HTML 文本选中时的背景颜色

定义::selection伪元素：在你的CSS文件中，添加::selection伪元素，并设置background-color属性来改变选中文本的背景颜色。

Humbunklung·2025-02-11 23:16

前端总结——HTML + CSS

4.伪类和伪元素的区别是什么？5.CSS如何实现垂直居中？6.CSS常见的选择器有哪些？7.CSS的优先级如何计算？8.长度单位px、em和rem的区别是什么？9.讲一下flex弹性盒布局？

巴拉巴拉巴7788·2025-02-04 19:47

CSS布局和定位应用方案

目录浮动布局绝对布局表格布局响应式布局弹性布局网格布局多栏布局浮动布局CSS3浮动布局的核心在于使用float属性将元素移出文档流，通过左右浮动来排列元素，并结合clear属性或清除浮动技巧（如这里的伪元素法

天涯学馆·2025-02-02 04:32

使用HTML和CSS制作爱心特效

我们将使用CSS的伪元素和过渡效果来实现这个效果。让我们开始吧！首先，我们需要创建一个HTML文件，并在其中添加一个div元素来容纳我们的爱心特效。

WbhsOcaml·2025-02-01 10:24

uniapp 微信小程序去除button默认样式

border:none;border-radius:0;background-color:transparent;}此时你会发现按钮的边框并没有去掉，通过控制器定位到这个按钮的边框样式可以看到，这个边框线是通过伪元素实现的

带着梦想扬帆启航·2025-01-25 06:08

学习HTML5总结（一）

—结构1、html基本的骨架和解释2、标签1、标签2、属性3、标签的分类4、实体字符5、列表6、超链接7、文件的路径3、选择器1、基础选择器2、复合选择器3、关系选择器4、属性选择器5、伪类选择器6、伪元素选择器

大学生努力学习·2025-01-17 11:20

第二章：CSS的复合选择器

目录一、并集选择器二、交集选择器三、后代选择器四、子代选择器五、兄弟选择器六、属性选择器七、伪类选择器1.动态伪类2.结构伪类3.否定伪类4.UI伪类5.目标伪类6.语言伪类八、伪元素选择器九、选择器的优先级十

卿言卿语·2025-01-17 10:31

（08）2020-12-10（清除浮动/解决父类塌陷问题、定位问题、ifont图标）

清除浮动/解决父类塌陷问题、ifont图标一、清除浮动1，父类塌陷产生原因2，解决方法（不推荐，只做了解）3，解决方法1,css的伪元素，是指他们不是真正的页面元素。

weixin_53125613·2024-09-11 23:43

04.css入门笔记-浮动以及清除浮动的方法

为什么要清除浮动3.清除浮动的本质4.清除浮动的方式1.额外标签法（隔墙法），是W3C推荐的做法2.父元素添加overflow属性，属性值有auto\hidden\scroll3.父元素添加:after伪元素

Mr_LiuP·2024-09-11 22:05

前端基础面试题·第二篇——CSS（其一）

1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after

DT——·2024-09-11 04:28

前端基础面试题·第二篇——CSS（其二）

important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02

DT——·2024-09-11 04:27

CSS设置背景图片的透明度

以下是几种方法来实现背景图片的透明度：方法1:使用伪元素(::before或::after)你可以使用伪元素来放置背景图片，并设置其透明度，而不影响其他元素。.

HWL5679·2024-09-08 12:00

CSS选择器

兄弟选择器4）邻居选择器4、属性选择器1）简单属性选择器2)具体属性选择器3）子串属性选择器5、伪类选择器1):first-child和：last-child2):nth-child(n)3）状态伪类6、伪元素选择器

Mr.蔬菜·2024-09-05 20:45

uniapp css样式盒子上面的箭头样式

在uniapp中，要创建一个盒子上面的箭头样式，可以使用CSS的伪元素::after或::before来实现。以下是一个简单的例子，展示了如何使用CSS创建一个向上的箭头。

m0_69254007·2024-09-04 19:36

CSS特效——图标图片悬浮旋转一周

CSS特效——图标图片悬浮旋转一周引言基本概念CSS3动画基础示例一：简单的无限循环旋转HTML结构CSS样式代码解释示例二：添加延迟和方向控制CSS样式代码解释示例三：使用伪元素增强视觉效果CSS样式代码解释示例四

DTcode7·2024-09-01 18:58

CSS学习5

复合选择器前言一、交集选择器二、并集选择器三、后代选择器四、子元素选择器五、属性选择器六、伪元素选择器（css3）前言复合选择器是由两个或多个基础选择器组成的。

乌鸦不像写字台·2024-09-01 08:22

使用css3实现【水波纹扩散效果】

使用css3实现【水波纹扩散效果】在CSS3中，我利用::before和::after伪元素以及动画（animation）来创建一个简单的水波纹扩散效果。

自不量力的A同学·2024-08-29 22:07

伪元素法简易遮罩层

Document.container{position:relative;width:200px;height:266.66px;}.containerimg{width:100%;height:100%;}.container::before{content:"";display:none;position:absolute;width:100%;height:100%;background:#

weixin_55559151·2024-08-29 22:37

CSS content 属性：伪元素的魔法师

标题：CSScontent属性：伪元素的魔法师摘要CSS（层叠样式表）是控制网页样式的强大工具。其中，content属性与伪元素结合使用，能够实现许多创造性的设计效果。

代码之光_1980·2024-08-26 08:03

引号的艺术：用CSS quotes 属性打造个性化引用

本文将深入探讨quotes属性的使用方法，包括如何设置不同的引号样式，以及如何结合伪元素和内容生成技术来实现更复杂的引号效果。1.引言在网页设计中，引用是常见的内容形式，用于展示他人的观点或信息。

2401_85812026·2024-08-26 00:18

HTML伪元素

#d1{width:0px;height:0px;/*background:paleturquoise;*//*border:8pxsolid#FF00FF;*//*transparent透明*/border-top:200pxsolidtransparent;border-bottom:200pxsolidtransparent;border-right:200pxsolidtransparen

呆呆敲代码丫·2024-08-24 10:52

前端必知必会-CSS布局伪元素

文章目录CSS伪元素伪元素的语法：::first-line伪元素::first-letter伪元素伪元素和HTML类多个伪元素CSS-::before伪元素CSS-::after伪元素CSS-::marker

编程岁月·2024-08-23 10:48

css伪类动画效果

一、before和after伪元素(详解)之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式

酷爱打戴马·2024-08-23 00:19

css穿透样式：deep的用法

这时，我们可以使用::v-deep伪元素来实现深度选择，也叫做深度穿透。在Vue3中，我们可以使用::v-deep来替代Vue2中的>>>或::v-deep(在单文件组件的中)。

番茄小酱001·2024-08-23 00:17

CSS系列:伪类选择器小记

目录一、关键是理解而不是记二、为啥需要伪类选择器1、表达元素的特定状态2、选择特定位置的元素3、选择特定属性的元素4、增强可访问性5、无需额外的HTML标记三、为啥需要伪元素选择器1、访问和样式化文档的特定部分

浪潮行舟·2024-08-22 23:14

CSS3新特性和CSS3动画

（3）伪元素选择器：选择特定部分的元素，例如::before、::after。（4）多重选择器：使用逗号分隔来同时选择多个元素，例如element1,element2。2

·2024-02-28 15:03

前端| Day6:Flex布局（黑马笔记）

Day6:Flex布局目录Day6:Flex布局一、标准流二、浮动1.基本使用2.产品区域布局HTML标签CSS样式3.清除浮动场景搭建额外标签法单伪元素法双伪元素法overfow法三、Flex布局1.

Sunshine.King·2024-02-20 19:22

jq22中部导航栏hover样式

上去的时候,整个盒子的周围边框会从左上角流动到右上角,当鼠标离开,又流回来.所以把代码弄下来,试着玩了一下,这里做一个小结.毕竟以前也用到transition,但是没别人玩的溜啊.需要用到的知识点:1.标签的伪元素

洋洋袁·2024-02-20 18:49

2024前端面试准备之CSS篇（一）

优先级由A、B、C、D的值来决定的，其中它们的值计算规则如下：A的值等于1的前提是存在内联样式,否则A=0B的值等于ID选择器出现的次数C的值等于类选择器和属性选择器和伪类出现的总次数D的值等于标签选择器和伪元素出现的总次数

前端fighter·2024-02-20 18:09

sass/scss基础使用（node|dart-sass区别、安装、搭配VScode的Easy Sass使用、基础语法、变量$、插值#{}、嵌套、父元素&、静默注释、数学运算、循环、混合、继承、函数）

目录Sass|Scss介绍版本（node|dart-sass）区别安装搭配VScode使用EasySass注意设置常见报错Scss(Sass)基础语法变量插值（#{}）嵌套伪类、伪元素|父元素表示（&）

YF-SOD·2024-02-20 10:26

2024前端面试准备之CSS篇（二）

全文链接1.什么是伪类和伪元素伪类（Pseudo-class）:伪类是选择器的一种，用于选择特定状态或条件下的元素。它们以冒号（:）开头，用于向选择器添加额外的特定条件。

前端fighter·2024-02-19 21:54

有趣的CSS - 旋转的太极图

目录整体效果核心代码html代码css部分代码完整代码如下html页面css样式页面渲染效果整体效果使用:before、:after伪元素以及animation属性画一个顺时针旋转的太极图。

设计师工作日常·2024-02-19 21:52

如何让elementUI的icon图标伪元素相对容器居中

这里用一个flex简单方法居中对齐,span作为icon伪元素的容器span[class*="el-icon-"]{display:flex;justify-content:center;align-items

啊森森啊·2024-02-19 15:13

vue动态样式绑定改变伪元素等特殊样式(css var函数)

改变样式是我们实际开发中最常做的事情。诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。那么，在vue中，我们更能很轻松的达到这点。看下常见的几种情景：情景一：我们需要根据某个变量是否存在（触发），去动态添加样式描述：当我们点击按钮触发了某个条件，我们需要给对应的元素添加激活效果这里我们通过三目判断某个触发条件的变量是否为

坏丶毛病·2024-02-13 09:14

级联样式单与css选择器（下）

级联样式单与css选择器（下）1.伪元素选择器css提供的伪类选择器有如下几个：:first-letter:该选择器对应的css样式对指定对象内的第一个字符起作用:first-line:该选择器对应的css

枫林晚。·2024-02-13 09:22

JavaEE学习日志(四十): CSS选择器，CSS属性

JavaEE学习路线（文章总汇）JavaEE学习日志（四十）CSSCSS选择器基本选择器属性选择器包含选择器伪元素选择器CSS属性边框属性转换属性字体属性背景属性浮动属性盒子模型注册前端案例CSSCSS

隔叶听风·2024-02-13 09:48

推荐频道

伪元素