场景：

假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在每个电话号码前都添加一个<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. maven 下载镜像文件卡，下载pom文件慢的问题

    问题原因: maven默认的镜像库URL为 http://maven.net.cn/content/groups/public/ 由于网络原因,可能导致响应速度超级慢,或者无法效应: 解决方法: 配置 ...

  2. python tricks

    1. cities = ['Marseille', 'Amsterdam', 'New York', 'Londom'] # the good way for i, city in enumerate ...

  3. undefined 和 undeclared 的区别

    var a; //undefined b; // b is not defined 区别:在变量作用域中已经申明但没有赋值的变量(如 a),是undefined.相反,在变量作用域中没有申明过的变量, ...

  4. LDA-线性判别分析（一）预备知识

    本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...

  5. git同步github代码

    yum install -y git 在linux下搭建git环境1.注册Github账号,网站:https://github.com2.Linux创建SSH密钥:git  config  --hel ...

  6. underscore.js源码解析【'_'对象定义及内部函数】

    (function() { // Baseline setup // -------------- // Establish the root object, `window` (`self`) in ...

  7. mac在命令行中打开某个文件夹

    使用 open 命令,如打开 ~/Download/abc open ~/Download/abc

  8. ES启动报错最大进程数太少

    [--16T18::,][INFO ][o.e.b.BootstrapChecks ] [node-] bound or publishing to a non-loopback address, e ...

  9. 自动化发布-GitLab WEB Hooks 配置

    钩子(hooks) hooks是在特定事件发生之前或之后执行特定脚本代码功能(从概念上类比,就与监听事件.触发器之类的东西类似). Git hooks就是那些在Git执行特定事件(如commit.pu ...

  10. #8 Python数学方法

    前言 前几节了解了Python的不同数据类型,有小伙伴会问,不同的数据类型之间是否可以相互转换?肯定是可以的,本篇博文主要记录数字类型的转换,其他类型的相互转换会在下几节记录,Here we go! ...