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. Net 文件和流 I/O

    文件和流 I/O 2017/03/30 文件和流 I/O(输入/输出)是指在存储媒介中传入或传出数据. 在 .NET Framework 中,System.IO 命名空间包含允许以异步方式和同步方式对 ...

  2. 最简单MySQL教程详解（基础篇）之多表联合查询

    在关系型数据库中,我们通常为了减少数据的冗余量将对数据表进行规范,将数据分割到不同的表中.当我们需要将这些数据重新合成一条时,就需要用到我们介绍来将要说到的表连接. 常用术语冗余(Redundancy ...

  3. C++学习 之 类的继承中的虚函数（笔记）

    1.多态行为 多态是面向对象语言的一种特征,让我们能够以类似的方式处理不同类型的对象.在C++中我们可以通过继承层次结构实现子类型多态. 我们可以通过下面的代码进一步了解多态: #include< ...

  4. # Clion复制提示信息

    Clion复制提示信息 windows: 按着alt 左键点击错误信息(按键点击同时进行) mac:按着option 左键点击错误信息 搞定

  5. 求问：numpy里面索引时，采用整型数组和整型列表的区别！

  6. volatile关键字和transient关键字

    Java 语言包含两种内在的同步机制:同步块(或方法)和 volatile 变量 1.volatile 关键字-----针对变量的可变性 专业解释:volatile关键字是个类型修饰符用它声明的类型变 ...

  7. python+minicap的使用

    说起Minicap,不得不提到STF,STF (Smartphone Test Farm) 是一个开源的web架构应用,用户可通过浏览器远程操作Android设备.调试Android应用.在设备上进行 ...

  8. Web前端开发中的小错误

    Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...

  9. java实现spark常用算子之groupbykey

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  10. 基于Websocket的websocketd

    WebSocket是什么 WebSocket是HTML5下面的一种技术,设计出来的目的就是要取代轮询和 Comet 技术,使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力. 浏览器通过 Ja ...