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. kmp算法分析和C++实现

    知乎高赞分析 作者:逍遥行 链接:https://www.zhihu.com/question/21923021/answer/37475572来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  2. 设计模式:模板方法(Template method)

    首先我们先来看两个例子:冲咖啡和泡茶.冲咖啡和泡茶的基本流程如下: 所以用代码来创建如下: 咖啡:Caffee.java public class Coffee { void prepareRecip ...

  3. thinkphp框架部署出现404解决

    1:虚拟机配置文件修改: location / { index index.php index.html; if (!-e $request_filename) { rewrite ^/index.p ...

  4. Django创建数据库常用字段及参数

    Django创建数据库常用字段及参数 常用字段 1.models.AutoField 自增列= int(11) 如果没有的话,默认会生成一个名称为 id 的列,如果要显示的自定义一个自增列,必须将给列 ...

  5. MySQL中的SQL的常见优化策略

    MySQL中的SQL的常见优化策略 MySQL中的索引优化 MySQL中的索引简介 1 避免全表扫描对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索 ...

  6. JMX jconsole 的使用

    JMX 1. JMX简单介绍 JMX的全称为Java Management Extensions. 顾名思义,是管理Java的一种扩展.这种机制可以方便的管理正在运行中的Java程序.常用于管理线程, ...

  7. Codeforces 1194A. Remove a Progression

    传送门 再一次题目看错浪费一小时...退役算了 自己手玩一下发现划掉的都是奇数,最后所有奇数都划掉了,证明也挺显然的 所以直接输出 $2m$ 即可 #include<iostream> # ...

  8. 删库？半个DBA的跑路经验总结

    0. 国内呆不下了,赶紧出国 首先,不要选动车,要选最近的一班飞机,尽快出国,能走高速走高速,不然选人少的路线. 没错,我们 DBA 都是常备护照的. 切记,注意看高德地图实时路况. 我们有个前辈就是 ...

  9. 一个密码经过多次MD5加密能否提高安全性？Java MD5盐值加解密

    什么是MD5? MD5(Message Digest Algorithm 5,信息摘要算法5),是计算机广泛使用的摘要算法(又称哈希算法)之一.MD5是将一段信息,通过其不可逆的字符串变换算法,产生了 ...

  10. TensorFlow入门——MNIST初探

    import tensorflow.examples.tutorials.mnist.input_data as input_data import tensorflow as tf mnist = ...