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. lombok安装

    今天学习spring boot 时候发现的lombok挺好用的,我这个使用的是spring boot 管理的版本,如果其他的可能需要你们自己去添加版本了,开发工具使用的是idea. maven: &l ...

  2. python中时间、日期、时间戳的转换

    1.简介 在编写代码时,往往涉及时间.日期.时间戳的相互转换. 2.示例 # 引入模块 import time, datetime 2.1 str类型的日期转换为时间戳 # 字符类型的时间 tss1 ...

  3. php配置php_pdo_mysql模块

    网上的都是什么编译安装的,总算找到一个简单的方法 安装好PHP yum install php php-fpm -y 直接安装pdo模块 yum install php-pdo_mysql 在/etc ...

  4. 十八、springcloud(四)熔断器

    1.熔断器(Hystrix) a.断路器机制 断路器很好理解, 当Hystrix Command请求后端服务失败数量超过一定比例(默认50%), 断路器会切换到开路状态(Open). 这时所有请求会直 ...

  5. AES对称加密和解密（转）

    AES对称加密和解密 package demo.security; import java.io.IOException; import java.io.UnsupportedEncodingExce ...

  6. 如何在myeclipse中实现jquery的自动提示功能

    在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料   jquery 1.8.3.js ...

  7. Sonar6.7.1配置修改备注

    sonarqube-6.7.1\conf\sonar.properties的配置字段 sonar.jdbc.url=jdbc:mysql://localhost:3306/sonarqube?useU ...

  8. 执行sql语句为什么?用PreparedStatement要比Statement好用

    PreparedStatement public interface PreparedStatement extends Statement;可以看到PreparedStatement是Stateme ...

  9. 小程序https请求，http网站升到https

    最近开发小程序,因为以前只写过小程序的前端没注意接口,现在才发现原来所有的接口都必须使用https协议了,马上研究了一波,顺便也想给自己的博客升成https的. 申请免费证书 哈哈没办法就是喜欢免费的 ...

  10. [转]Java事件处理机制- 事件监听器的四种实现方式

    原文来自http://stefan321.iteye.com/blog/345221 自身类作为事件监听器 外部类作为事件监听器 匿名内部类作为事件监听器 内部类作为事件监听器 自身类作为事件监听器: ...