伪元素吸附在选择上和pseudo classes伪类很像,像这样selector:pseudoelement{property: value;}。有四种方式。
First letters and First lines 首字母和首行
first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。
Example Source Code [www.52css.com]
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before and after 前后
before和after用来联系content属性不使用HTML确定一个元素的内容位置。
content属性值可以是:open-quote,close-quote,no-open-quote,no-close-quote,在引号标记里关闭任何字符串或使用url(imagename)图片。
Example Source Code [www.52css.com]
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
听起来不错吧,可惜大部分用户不能体会到before或after的效果,因为IE不支持。
First letters and First lines 首字母和首行
first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。
Example Source Code [www.52css.com]
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before and after 前后
before和after用来联系content属性不使用HTML确定一个元素的内容位置。
content属性值可以是:open-quote,close-quote,no-open-quote,no-close-quote,在引号标记里关闭任何字符串或使用url(imagename)图片。
Example Source Code [www.52css.com]
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
听起来不错吧,可惜大部分用户不能体会到before或after的效果,因为IE不支持。
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 744如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 722At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 834使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 757操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 954背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 658一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 608请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 465Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 668前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 717如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 625CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 617margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 711有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1080css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 727HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 682CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
TailwindCSS插件,添加伪元素的变体( ::before , ::after , ::first-letter等)。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const...
3. **伪元素(Pseudo-elements)** - CSS3的伪元素如`:before`和`:after`,可以让我们在HTML元素前后添加内容,而无需修改HTML结构。在这里,它们可能被用来创建字母的额外部分,配合`transform`实现3D效果。 - ...
标题“前端开源库-pseudo-elements”指向的是一个专门收集和整理CSS伪元素相关资源的开源项目,可能包含了一个详尽的伪元素列表,以及如何在实际项目中使用它们的示例和最佳实践。 描述中的“所有CSS伪元素的列表”...
本教程将深入探讨如何利用CSS3的伪元素(Pseudo-elements)和data属性来制作一个有趣的图片caption标题动画效果。这个效果在鼠标悬停图片时,标题会神奇地出现,极大地增强了用户的视觉体验。 首先,让我们了解CSS3...
虽然CSS本身并不像JavaScript那样提供完整的编程接口,但CSS Level 2.0引入了一些高级特性,如条件注释(@media)、伪类(:hover、:active、:focus)和伪元素(::before、::after)。这些功能使得CSS在特定条件下...
CSS 2.0样式表中文手册手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 ...
手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...
**CSS伪元素(Pseudo-elements)**: 伪元素与伪类相似,但它们不是状态,而是用于代表元素的一部分,比如`::before`和`::after`可以分别在元素内容之前或之后插入内容,而`::first-letter`和`::first-line`则分别...
CSS伪元素(Pseudo-Elements)是一种特殊的样式规则,用于定义文档中没有实际DOM节点的元素部分,例如`::before`和`::after`。这些伪元素在页面渲染时被插入到元素内部,但并不在DOM树中可见。在某些场景下,我们...
这个压缩包“前端开源库-pseudo-elements.zip”可能包含了一些关于`pseudo-elements`的示例、教程或工具,旨在帮助开发者更深入地理解和运用这个技术。 `pseudo-elements`主要有以下几种: 1. `::before`: 这个伪...
手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...
接下来是伪元素(Pseudo-elements),这是CSS中一种特殊的元素表示,用于操作HTML元素的内容或结构,但不会在DOM树中实际存在。常见的伪元素有`::before`和`::after`,它们可以插入内容到元素内容之前或之后。例如,...
手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...
接下来,我们来分析伪元素(Pseudo-elements)。伪元素则用于创建一些不在文档树中的元素,并为其提供样式。它们允许开发者对元素的特定部分进行样式化,比如第一个字、第一行等。它们是基于元素的抽象,实际上并不...
为了更好地学习CSS,你需要不断地练习和尝试,创建自己的项目,不断探索新的CSS特性,如动画(Animations)、过渡(Transitions)、伪类(Pseudo-classes)和伪元素(Pseudo-elements)等。同时,关注W3C标准的更新...
而伪元素(Pseudo-elements)则是为元素创建视觉上的附加部分,它们并不是真正的HTML元素,但可以用来模拟新的内容。例如,`:first-letter`可以用于设置文本首字母的样式,`:before`和`:after`则可以在元素前后插入...
- **伪元素(Pseudo-elements)**: 如`::before`和`::after`,用于在元素前后插入内容。 - **选择器组合(Combinators)**: 如`>`(子选择器)、`+`(相邻兄弟选择器)和`~`(一般兄弟选择器)。 - **属性选择器...
下面将详细解释几种常见的CSS伪元素。 1. `::first-letter` 伪元素: 这个伪元素用于选取元素内的第一个字母,并允许我们对其应用特定的样式。例如,如果你想让每个段落的首字母放大,可以使用如下的CSS规则: ``...
在CSS中,伪元素(Pseudo-elements)是一种特殊的元素,它允许我们添加额外的元素而不扰乱文档本身。在某些情况下,我们需要给before和after伪元素设置js效果,以实现某些特定的样式效果。下面将介绍五种不同的方法...