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. 初学java集合框架笔记

    List接口常用方法: 方法名 说    明 boolean add(Object o) 在列表的末尾顺序添加元素, 起始索引位置从0开始 void add(int index,Object o) 在 ...

  2. linux下安装mysql解决乱码、时间差、表的大小写问题

    编辑vi /etc/mysql/my.cnf,有的则是:/etc/my.cnf,加入 [client]default-character-set=utf8mb4 [mysql]default-char ...

  3. 唯一分解定理（以Minimun Sum LCM UVa 10791为例）

    唯一分解定理是指任何正整数都可以分解为一些素数的幂之积,即任意正整数n=a1^p1*a2^p2*...*ai^pi:其中ai为任意素数,pi为任意整数. 题意是输入整数n,求至少2个整数,使得它们的最 ...

  4. freebsd安装python2

    第一步  cd /usr/ports/lang/python27 第二步 输入以下命令(需要联网) make make install 到此如果输入python无效   继续 第三步 cd /usr/ ...

  5. 使用ssh服务管理远程主机

  6. Dynamics CRM Instances

    Dynamics CRM 的instances: 当我们打开Dynamics 365 admin portal 会看到我们instance是什么: 新 admin center界面: 当前的admin ...

  7. debian系统下apache2开启ssi功能

    SSI (Server Side Include)的 html 文件扩展名 (.shtml), 通常称为"服务器端嵌入"或者叫"服务器端包含"说白了就是类似其他 ...

  8. 使用Java监控工具出现 Can't attach to the process

    问题重现 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ➜ jinfo -flags 3032 Attaching ...

  9. 使用Tensorflow操作MNIST数据

    MNIST是一个非常有名的手写体数字识别数据集,在很多资料中,这个数据集都会被用作深度学习的入门样例.而TensorFlow的封装让使用MNIST数据集变得更加方便.MNIST数据集是NIST数据集的 ...

  10. C++Primer第五版——习题答案详解（五）

    习题答案目录:https://www.cnblogs.com/Mered1th/p/10485695.html 第6章 函数 练习6.4 #include<iostream> using ...