CSS 的伪元素是什么？
CSS伪元素是用来添加一些选择器的特殊效果。用于：向某个选择器中的文字的首行。
㈠语法
①伪元素的语法：
selector:pseudo-element {property:value;}
②CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
㈡:first-line 伪元素
⑴"first-line" 伪元素用于向文本的首行设置特殊样式。
⑵"first-line" 伪元素只能用于块级元素。
⑶下面的属性可应用于 "first-line" 伪元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
⑷示例：浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-line</title>
<style>
p:first-line
{
color:deeppink;
font-variant:small-caps;
}
</style>
</head> <body>
<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
</body>
</html>
效果图：
㈢:first-letter 伪元素
⑴"first-letter" 伪元素用于向文本的首字母设置特殊样式
⑵"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
⑷示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首字母特殊样式</title>
<style>
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
</head> <body>
<p>用美好的心情去面对接下来会发生的每一件事。</p>
</body>
</html>
效果图：
㈣伪元素和CSS类
伪元素可以结合CSS类
示例：使所有 class 为 article 的段落的首字母变为红色。
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
㈤多个伪元素
示例：段落的第一个字母将显示为红色，其字体大小为 xx-large。
第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结合示例</title>
<style>
p:first-letter
{
color:deeppink;
font-size:xx-large;
}
p:first-line
{
color:blue;
font-variant:small-caps;
}
</style>
</head> <body>
<p>洗尽铅华始见金，褪去浮华归本真</p>
</body>
</html>
效果图：
㈥CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>：before</title>
<style>
h1:before {content:url(smiley.gif);}
</style>
</head> <body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>
效果图：
㈦CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>：after</title>
<style>
h1:after {content:url(smiley.gif);}
</style>
</head> <body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>
效果图：
㈧所有CSS伪类/元素
CSS 的伪元素是什么？的更多相关文章
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- CSS的伪元素（二）
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...
- css的伪元素
这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- 笑谈CSS的伪元素
今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
随机推荐
- java中start（）、yield、setDeamon()
本节主要说明以下三个问题 start()的启动顺序不代表线程的启动顺序 yeild的作用 守护线程 1.start()与线程启动顺序 package foreverly.cn.chapter1; pu ...
- Windows 系统安装 Docker
详细方法参见官方文档. Win10 家庭版 安装Toolbox Win10 家庭版由于功能限制,不能直接安装 Docker for Windows, 需要使用 Toolbox 的形式进行安装. 确认版 ...
- JAVA break、continue和return的区别
控制跳转:continue和break的区别,以为return Continue在循环中使用,一般在for中使用 Break:跳出单重循环,常和switch搭配使用. 效果区别 Break的结果如下: ...
- 关于Faster-RCNN训练细节
Faster RCNN训练: 四部训练法: Faster R-CNN,可以大致分为两个部分,一个是RPN网络,另一个是Fast R-CNN网络,前者是一种候选框(proposal)的推荐算法,而后者则 ...
- python基础之初始函数
首先,为什么要使用函数? 函数的本质来说,就是写一串代码具有某些功能,然后封装起来,接下来可以很方便的调用 例如...然后... # s = '金老板小护士'# len(s) #在这里需求是求字符串s ...
- sql server 函数详解（5）系统函数
返回表中指定字段的长度 返回表中指定字段的名称 返回数据表达式的数据的实际长度函数 返回数据库的编号 返回数据库的名称 返回数据库当前默认的null值 返回服务器端计算机的标识号 返回服务 ...
- 04 定时任务及yum源的选择
1.查看系统的发行版本 cat /etc/redhat -release cat /etc/os -release 2.用户管理 linux超级用户 root拥有最高权限 管理员 sudo命令就是ro ...
- 重学HTML5的语义化
干了这么多年的前端,之前面试的时候经常会遇到面试官提问:你是如何理解HTML的语义化的? 说实话,之前遇到这个问题的时候,都是从网上找参考答案,然后记下来,用自己的语言重新组织一下,就变成自己的理解了 ...
- ios 动画：底部标签栏的概念设计
本文汇集了大量优秀的ios底部标签栏动效设计,并附上技术实现的指南,对于设计师和开发者都提供了很好的灵感来源和学习资源. 我们每天都见到tab bars,它们指引用户,使得他们能够快速在不同的tab中 ...
- 全局捕获异常（适用于SpringMvc,SpringBoot项目）
@ControllerAdvice 是controller的一个辅助类,最常用的就是作为全局异常处理的切面类.约定了几种可行的返回值,可以返回String字符串,也可以返回ModelAndView,也 ...