场景：

假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在每个电话号码前都添加一个<img>标签？这要整到猴年马月？搞不好还会出现标签浮动的问题。

这个时候::after伪元素和::before伪元素就是救星了，在css中有这么两个伪类，允许通添加伪元素在html元素前/后添加内容。

这里我简单写了一个demo

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

.phone-number{

    font-size: 14px;

    font-weight: 600;}

.phone-number::before{

    content: '\260E';

    font-size: 22px;

    color: red;

}

</style>

</head>

<body>

    <div class='phone-number'>&ensp;13300000000</div>

    <div class='phone-number'>&ensp;13300000001</div>

    <div class='phone-number'>&ensp;13300000002</div>

    <div class='phone-number'>&ensp;13300000003</div>

    <div class='phone-number'>&ensp;13300000004</div>

</body>

</html>

实现的效果如下

每一个号码都有一个class属性，我只需要对这个class属性写一次css渲染层和添增上

:: before伪元素就可以实现这个功能了。显然这比一个个添加<img>标签要轻松得多。

可能有人会问，这个的符号是怎么来的？html官方规定了一些特殊符号的unicode码，具体可以看http://www.cnblogs.com/starof/p/4718550.html。

下面是:: before伪元素和:: after伪元素的具体用法和使用规则

（1）content:’()’

作用：在标签前/后添加字符串

使用规则：content后面一定要用‘’把要添加的内容括起来，否则是无法显示的（括号不一定需要添加）。

例如：

在<p>￥80元</p>之后添加如下css装饰代码：

p::after{

         content:'门市价100元';

         font-size: 14px;

         text-decoration: line-through;

         color: grey;

}

（2）content:url(‘图片地址’)

作用：在标签前/后添加图片（图片通过网络url实时加载）

使用规则：必须用url()引入需要添加的图片，道理跟background的设置一样。图片的地址也需要用‘’括起来。

例如：

在<div id='yidong-nub'>

<a href='http://www.10086.cn/images/index/logo.png'>&emsp;10086</a>

</div>

添加css装饰代码

a::before{

    content:url('http://www.10086.cn/images/index/logo.png');

}

（3）清除浮动

::after{

content : ’’ ;

display:block;

}

用法是设置content的为空字符串

关于清除浮动的一些可用方法有很多种，我在这里就不展开来说了。

用人可能会说，用法（1）在p标签后面添加内容，直接在html代码里面的p标签后面再增加一个p标签不就行了吗？为什么还要用这种方法呢？

可以思考一下，通过在后面添加一个p标签，同时也需要用css代码去装饰这个新添加上去的标签。显然，代码量上，后者比前者多了，而且后者在html中新增了一个DOM节点，如果数量很多时，解析器在解析时难免会增加一定的时间。而前者没有这种问题，而且还能更好实现表现层和样式层的分离式开发。

最后值得知道的是，使用::before和::after伪元素这种添加内容的方式，只是在css渲染页面的时候添加上去的，在DOM节点上是查不到这些添加上去的内容的。所以，一般不要添加实际的内容。意味着除了文本内容和图片/icon之外的html标签是无法添加进去的。

::before和::after伪元素的妙用的更多相关文章

  1. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  2. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  3. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  4. CSS :befor :after 伪元素的妙用

    本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...

  5. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  6. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  7. css before，after伪元素妙用

    我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...

  8. CSS伪元素before、after妙用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 伪元素 before 和 after 各种妙用

    大家可能对伪类和伪元素有点迷糊,在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 这里整理总结下: 有时你会发现伪类元素使 ...

随机推荐

  1. 【不遮遮掩掩】Github上传本地代码以及常见问题解决方案

    2019.20.18更新: 把完整命令打一遍吧,不然看完太累了不是 //初始化文件夹 git init //初始化目录,把基本文件下载下来,如ignore文件 git pull --rebase or ...

  2. 使用 redis-dump 批量导入导出数据

    有时候需要将 redis 的数据进行导入导出操作,可以使用 redis-dump 这款工具. 一.安装RVM redis-dump 工具依赖于2.2以上版本的 ruby,而 centos 环境下 yu ...

  3. linux pidstat 命令详解

    pidstat 概述 pidstat是sysstat工具的一个命令,用于监控全部或指定进程的cpu.内存.线程.设备IO等系统资源的占用情况.pidstat首次运行时显示自系统启动开始的各项统计信息, ...

  4. Java基础 - 线程（一）

    一.什么是线程 首先,介绍一下线程.进程的概念. 进程是操作系统分配资源的最小单元,线程是操作系统调度的最小单元.进程是指运行中的应用程序,Windows任务管理器进程窗口看到的每一项都是一个进程.每 ...

  5. Hadoop－调优剖析

    1.概述 其实,在从事过调优相关的工作后,会发现其实调优是一项较为复杂的工作.而对于Hadoop这样复杂且庞大的系统来说,调优更是一项巨大的工作,由于Hadoop包含Common.HDFS.MapRe ...

  6. C# 中集合类型需要按多个条件排序

    在 C# (.net 3.5 之后) 中集合是可以通过 OrderBy() 和 OrderByDescending()方法来进行排序的,如果需要集合中的元素是对象,还可以通过 Lambda表达式进行按 ...

  7. A brief introduction to per-cpu variables

    墙外通道:http://thinkiii.blogspot.com/2014/05/a-brief-introduction-to-per-cpu.html per-cpu variables are ...

  8. css3学习--select怎么去掉默认样式

    select { 2. /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ 3. border: solid 1px #000; 4. /*很关键:将默认的select选择框样式 ...

  9. js-ES6学习笔记-const命令

    1.const声明一个只读的常量.一旦声明,常量的值就不能改变. 2.const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值. 3.const的作用域与l ...

  10. spring的第二天

    spring的第二天 ssm框架 spring  在昨天简单的介绍了一下spring,那么今天接着继续介绍. spring值的注入 自动装配[autowire] 引用资源 applicationCon ...