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. 关于Linux文本处理“三剑客”的一些小操作。

    Linux文本处理“三剑客”,即grep.sed.awk,这是Linux中最核心 的3个命令. 一.首先做个简单的介绍: 1.awk:linux三剑客老大,过滤,输出内容,一门语言.NR代表行号. 2 ...

  2. hue改保存记录条数

    参考: https://blog.csdn.net/liaoxiaoyi121121/article/details/80541901 需求: 开发需要保存查询记录的条数从10万改到100万 /etc ...

  3. delphi 连接各中数据库方法

    ---恢复内容开始--- 数据库连接字符串的拼写规则的决定条件: • 连接的数据库的类型:SQL Server,Oracle,MySQL,Acess,MogoDB,Visual FoxPro(dBAS ...

  4. Python 入门 之 反射

    Python 入门 之 反射 1.反射 : (自省) ​ 反射主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省). Python面向对象中的反射:通过字符串的形式操作对象的相关属性.P ...

  5. stm32F429启动时钟配置

    STM32f429在启动时会在startup_stm32f429_439xx.s中调用static void SetSysClock(void)函数.默认使用的是25M晶振,把系统时钟设置为180M. ...

  6. centos7 上pip install mysqlclient的时候报错OSError: mysql_config not found,

    yum install mysql-devel gcc gcc-devel python-devel

  7. C++ 友元（friend关键字）、类中的重载、操作符重载（operator关键字）

    C++ 中友元的用法: 1.在类中使用friend关键字声明 2.类的友元可以是其它类或者具体函数 3.友元不是类的一部分 4.友元不受类中访问级别的限制 5.友元可以直接访问具体类中的所有成员. 友 ...

  8. linux端口控制（开放-禁止）

    禁止访问80端口iptables -I INPUT -p tcp --dport 80 -j DROP 允许ip为192.168.1.1的机器访问iptables -I INPUT -p tcp -s ...

  9. k8s的一些基本命令

    kubernetes用到的一些命令 kubectl管理工具以及命令 基础命令:create,delete,get,run,expose,set,explain,edit. create命令:根据文件或 ...

  10. iOS响应链和传递机制

    iOS中加载的时候会先执行main函数 int main(int argc, charchar * argv[]) { @autoreleasepool { return UIApplicationM ...