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. sql server中case when的用法

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  2. 日常遇错之ModuleNotFoundError: No module named request

    用pycharm写python的时候,import request时,报错:ModuleNotFoundError: No module named request emmmm.解决方法:pip in ...

  3. ubuntu yolov2 训练自己的数据集

    项目需求+锻炼自己,尝试用yolov2跑自己的数据集,中间遇到了很多问题,记下来防止忘记 一.数据集 首先发现由于物体特殊没有合适的现成的数据集使用,所以只好自己标注,为了减少工作量,先用opencv ...

  4. Oracle的导入和导出

    导出命令: EXP 用户名/密码@数据库名  BUFFER=64000 file=G:\dmp\full1.dmp  OWNER=用户名 导入命令: IMP 用户名/密码@数据库名 BUFFER=64 ...

  5. Maven项目中在properties 中使用 ${} 来引用pom文件中的属性

    比如在pom文件中定义了属性如下: <jdbc.host.global>127.0.0.1</jdbc.host.global> <jdbc.databasename.g ...

  6. flex 布局压缩问题

    在 flex 布局中,当有一个元素宽度过长时,另一个元素宽度会被压缩, 如下图: 解决办法:在不想被压缩的元素上加上样式 flex-shrink: 0; 效果图:

  7. The perception and large margin classifiers

    假设样例按照到来的先后顺序依次定义为.为样本特征,为类别标签.任务是到来一个样例,给出其类别结果的预测值,之后我们会看到真实值,然后根据真实值来重新调整模型参数,整个过程是重复迭代的过程,直到所有的样 ...

  8. 机器学习简要笔记（五）——Logistic Regression(逻辑回归）

    1.Logistic回归的本质 逻辑回归是假设数据服从伯努利分布,通过极大似然函数的方法,运用梯度上升/下降法来求解参数,从而实现数据的二分类. 1.1.逻辑回归的基本假设 ①伯努利分布:以抛硬币为例 ...

  9. vue展示dicom文件，医疗系统。

    环境:vue.webpack.constone 资料来源及文件:https://github.com/GleasonBian/CornerstoneVueWADO 需要下载的模块:cornerston ...

  10. bootstrap的日期选择器

    时间框偏移解决办法 首先导入js和css文件 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ...