购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 伪元素

CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果。它可以创造关于文档语言能够指定的文档树之外的抽象;还提供样式设计师给在源文档中不存在的内容分配样式(例如::before和:after能够访问产生的内容)。
编辑:前端控 前端控 更新时间:2019-02-01 13:49:40

CSS  伪元素

CSS伪元素是用来添加一些选择器的特殊效果

伪元素的语法:

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素:

selector.class:pseudo-element {property:value;}

:first-line 伪元素

:first-line 伪元素用于向文本的首行设置特殊样式。

实例

p{
width:200px;
}
p:first-line{
	background-color: pink;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

注意: first-line伪元素只能用于块级元素。

以下属性可应用于first-line 伪元素:

  • font properties

  • color properties 

  • background properties

  • word-spacing    

  • letter-spacing

  • text-decoration   

  • vertical-align 

  • text-transform    

  • line-height  

  • clear

:first-letter 伪元素

first-letter 伪元素用于向文本的首字母设置特殊样式

实例

p:first-letter{
	color: pink;
	font-size:40px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

注意:first-letter 伪元素只能用于块级元素 

下面的属性可应用于 "first-letter" 伪元素      

  • font properties

  •  color properties

  • background properties  

  • margin properties

  • padding properties    

  • border properties

  • text-decoration

  • vertical-align (only if "float" is "none")

  • text-transform  

  • line-height 

  • float

  • clear

伪元素和 CSS 类

伪元素可以与 CSS 类配合使用

实例

p.demo:first-letter{
	color:skyblue;
	font-size:40px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 22.jpg

多重伪元素

可以结合多个伪元素来使用。

实例

p:first-line{
background-color: pink;
}
p:first-letter{
	color:skyblue;
	font-size:40px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 23.jpg

CSS  :before 伪元素

:before伪元素可以在元素的内容前面插入新内容

实例

p:before{
	content: url("images/logo.png");
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 24.jpg

CSS :after 伪元素

:after伪元素可以在元素的内容之后插入新内容。

实例

p:after{
	content: url("images/logo.png");
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 25.jpg

所有CSS伪类/元素

选择器示例示例说明
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个<p> 元素的第一个字母
:first-linep:first-line选择每个<p> 元素的第一行
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:beforep:before在每个<p>元素之前插入内容
:afterp:after在每个<p>元素之后插入内容
:lang(language)p:lang(it)为<p>元素的lang属性选择一个开始值


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号