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 的伪元素是什么？的更多相关文章

  1. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  2. CSS的伪元素（二）

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  3. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  4. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  5. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  6. 笑谈CSS的伪元素

    今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...

  7. css的伪元素 ::after ::before 和 图标字体的使用

    浅谈css的伪元素::after和::before   css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...

  8. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  9. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

随机推荐

  1. [爬虫] BeautifulSoup库

    Beautiful Soup库基础知识 Beautiful Soup库是解析xml和html的功能库.html.xml大都是一对一对的标签构成,所以Beautiful Soup库是解析.遍历.维护“标 ...

  2. PTA(Basic Level)1041.考试座位号

    每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考 ...

  3. [转帖]深入浅出全面解析RDMA

    深入浅出全面解析RDMA 置顶 2018年06月04日 11:36:54 MasterT-J 阅读数 17193更多 所属专栏: RDMA   RDMA(RemoteDirect Memory Acc ...

  4. postman测试webservice接口

  5. 如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教 ...

  6. Java Web开发技术教程入门-数据库

    补更:阅战阅勇第六天 今天阅读了这本书的第六章-访问数据.首先,这本书讲解的是MySql数据库,它是一个关系型数据库管理系统,是由瑞典MySqlAB公司开发,目前属于Oracle旗下公司.在web应用 ...

  7. 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。

    今天使用npm安装插件时出现了以下错误: 经查,原因:现用执行策略是 Restricted(默认设置) 解决办法: 1.win+X键,使用管理员身份运行power shell 2.输入命令:set-e ...

  8. JVM（6）之 二次标记

    开发十年,就只剩下这套架构体系了! >>>   上一章我们讲到了标记,但是不是被标记了就肯定会被回收呢?不知道小伙伴们记不记得Object类有一个finalize()方法,所有类都继 ...

  9. 08 Python爬虫之selenium

    ---恢复内容开始--- 一. 先介绍图片懒加载技术 当获取一个网站的图片数据时,只能爬取到图片的名称,并不能获得链接,而且也不能获得xpath表达式.这是应用了图片懒加载技术. - 图片懒加载技术的 ...

  10. Vue之动态class写法总结

    对象方法 最简单的绑定 :class="{ 'active': isActive }" 判断是否绑定一个active :class="{'active':isActive ...