场景：

假如有一天，你的在写一个前端项目，是关于一份点餐商家电话信息表，你啪塔啪塔地写完了，突然间项目经理跑过来找你，要求你在每一个商家的电话号码前都添加一个电话符号，来使得电话号码更直观和页面更美观。这个时候你就纠结了，这不是折磨人吗？这不是要我在每个电话号码前都添加一个<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 - 实例-6-聚合与继承

    创建项目 xxx - 继承自testDep.PPP <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= ...

  2. 使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  3. Fillder Script语法

    官方的Fiddler Script使用文档 http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrRes ...

  4. Android生成二维码--拍照或从相册选取图片

    拍照或从相册选择图片是我们日常开发中经常使用到的,可以说是必须掌握的东西.上一篇我介绍了如何生成自定义二维码<Android生成自定义二维码>,其中logo和代替黑色色块的图片都是写死的, ...

  5. 从零开始学 Web 之 Ajax（二）PHP基础语法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 CSS3（六）动画animation，Web字体

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Java 范例 - 字节处理

    前言 Java 编程中常会遇到需要进行字节处理的地方,本篇文章就来探讨编程中会遇到的字节处理问题. 字节序 字节序(endianness)是对于多字节数据来说的,它描述了多字节数据存储的顺序,分为大端 ...

  8. 程序员进阶之算法练习：LeetCode专场

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由落影发表 前言 LeetCode上的题目是大公司面试常见的算法题,今天的目标是拿下5道算法题: 题目1是基于链表的大数加法,既考察基本 ...

  9. php使用memcached缓存总结

    1. 查询多行记录,以sql的md5值为key,缓存数组(个人觉得最好用的方法) $mem = new Memcache(); $mem->connect('127.0.0.1',11211); ...

  10. Hibernate学习（五）———— hibernate一对一关系映射详解

    一.一对一关系的概述 一对一关系看起来简单,其实也挺复杂的.其中关系就包含了四种,单向双向和主键关联外键关联. 什么意思呢,也就是包含了单向一对一主键关联.双向一对一主键关联,单向一对一外键关联,双向 ...