css3为了区分伪类和伪元素，伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

<!DOCTYPE html>

<meta charset="utf-8" />

<style type="text/css">

    .phoneNumber::before {

    content:'\260E';

    font-size: 15px;

}

</style>

<p class="phoneNumber">12345645654</p>

这些特殊字符的html，js和css的写法是不同的

使用::befor和::after伪元素在网站中添加图标的更多相关文章

  1. TogetherJS – 酷！在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

  2. 【前端】向blog或网站中添加语法高亮显示代码方法总结

    向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在ID ...

  3. 4-10 辅助方法controll_name,;SanitizeHelper; 伪元素和scss中的&, @Media; cache介绍。

    回顾知识点 1. 在application.html.erb中: <main class="<%= controller.controller_name%>"&g ...

  4. 百家搜索：在网站中添加Google、百度等搜索引擎

    来源:http://www.ido321.com/1143.html 看到一些网站上添加了各种搜索引擎.如Google.百度.360.有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键 ...

  5. 在网站中添加 https 百度分享

    博客地址:http://www.moonxy.com 一.前言 百度分享是一个提供网页地址收藏.分享及发送的 WEB2.0 按钮工具,借助百度分享按钮,网站的浏览者可以方便的分享内容到人人网.开心网. ...

  6. Wordpress网站中添加百度统计代码

    百度统计是流量分析平台,帮助收集网站访问数据,提供流量趋势.来源分析.转化跟踪.页面热力图.访问流等多种统计分析服务,同时与百度搜索.百度推广.云服务无缝结合,为网站的精细化运营决策提供数据支持,进而 ...

  7. asp.net网站中添加百度地图功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  8. bootstrap设计网站中添加代码高亮插件

    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...

  9. 在.net core web网站中添加webSocket支持

    注意:前置条件,操作系统 windows 8 以上,IIS Express 8.0 以上. 第1步:在Startup.cs文件的头部添加如下引用: using System.Net.WebSocket ...

随机推荐

  1. des加密破解

    在爬取某些网站时, 登录等重要操作的返回结果是des加密后的. 如何破解 1, Python 语言采用 pyDes 作为 DES 加解密处理的包. 2,通过请求 http://tool.chacuo. ...

  2. spring-task解决定时问题

    *  spring3以上版本,spring-content自带 spring-task ,来解决工程中的定时问题  基于注解配置spring定时任务 spring配置文件如下: <?xml ve ...

  3. java 加密工具类（MD5、RSA、AES等加密方式）

    1.加密工具类encryption MD5加密 import org.apache.commons.codec.digest.DigestUtils; /** * MD5加密组件 * * @autho ...

  4. Flume架构以及应用介绍

    在具体介绍本文内容之前,先给大家看一下Hadoop业务的整体开发流程:  从Hadoop的业务开发流程图中可以看出,在大数据的业务处理过程中,对于数据的采集是十分重要的一步,也是不可避免的一步,从而引 ...

  5. 学习笔记TF045:人工智能、深度学习、TensorFlow、比赛、公司

    人工智能,用计算机实现人类智能.机器通过大量训练数据训练,程序不断自我学习.修正训练模型.模型本质,一堆参数,描述业务特点.机器学习和深度学习(结合深度神经网络). 传统计算机器下棋,贪婪算法,Alp ...

  6. Netty学习记录

    一.Netty简介 Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性. Netty 是一个 NIO client-s ...

  7. nginx里proxy_pass有无/的区别

    nginx在反向代理的时候,proxy_pass需要指定路径,有无"/"的区别,如下:   location /lile { 配置一: proxy_pass http://192. ...

  8. hbase hbck命令

    hbase hbck 只做检查 hbase hbck -fixMeta 根据region目录中的.regioninfo,生成meta表` hbase hbck -fixAssignments 把met ...

  9. 收藏Dotnetbar的官方学习链接

    Archive for the DotNetBar for Windows Forms Category: http://www.devcomponents.com/kb2/?cat=3 视频教程: ...

  10. Centos7.5 安装高版本Cmake 3.6.2

    下载Cmake wget https://cmake.org/files/v3.6/cmake-3.6.2.tar.gz 解压Cmake tar xvf cmake-3.6.2.tar.gz & ...