CSS伪元素:before/CSS伪元素:before/:after content 显示Font Awesome字体图标:after content 显示Font Awesome字体图标
HTML
<a href="javascript:volid(0);"><i class="icon-table"></i>表格</a>
CSS
input[type="radio"]:checked + label:before {
content: "\e659"; // iconfont格式,打开iconfont.css文件里面可以找到
position: absolute;
left: 31px;
top: 2px;
font-family: "iconfont" !important; // 一定要设置font-family:“iconfont”不然字体无法出来
color: #2070F7;
font-size: 14px;
line-height: 42px;
}
控制台查看:

CSS伪元素:before/CSS伪元素:before/:after content 显示Font Awesome字体图标:after content 显示Font Awesome字体图标的更多相关文章
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- css伪元素选择器(伪对象选择器)checked + 伪元素练习
伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- 知方可补不足~CSS中的几个伪元素
对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...
- CSS中伪类选择器及伪元素
1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- CSS选择器之伪类选择器(伪元素)
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- CSS——你所不知的 CSS ::before 和 ::after 伪元素用法(转)
你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...
随机推荐
- peewee insert 数据时报错:'buffer' object has no attribute 'translate'
错误信息: "'buffer' object has no attribute 'translate'" 场景:使用peewee insert 数据时,BlobField 字段存储 ...
- C#3.0智能的编译器
智能的编译器 在C#3.0中,编译器变的越来越智能,我们不用提供给它完整的信息,仅需要提供必要的信息,编译器就可以进行推断为我们补全未提供的信息 自动实现的属性 在之前我们生成一个类时需要有一个字段, ...
- 精读《syntax-parser 源码》
1. 引言 syntax-parser 是一个 JS 版语法解析器生成器,具有分词.语法树解析的能力. 通过两个例子介绍它的功能. 第一个例子是创建一个词法解析器 myLexer: import { ...
- centos7正确关机重启
linux主要用于服务器领域,而在服务器上执行一项服务是永无止境的,除非遇到特殊情况,否则不会关机.和Windows不同,在linux系统下,很多进程是在后台执行的.在屏幕背后,可能有很多人同时在工作 ...
- ssh-login 一键密码加密登录工具
ssh-login 1. Feature 管理多个帐号,每个帐号一个易记的 tip name,支持 tab 进行 tip name 补全,一键 ssh 登录 密码 AES 加密,密文存储密码,且只需要 ...
- (摘)Entity Framework Core 2.1带来更好的SQL语句生成方案
微软发布了Entity Framework Core2.1,为EF开发者带来了很多期待已久的特性.EF Core 2.1增加了对SQL GROUP BY的支持,支持延迟加载和数据种子等. EF Cor ...
- Java高并发--原子性可见性有序性
Java高并发--原子性可见性有序性 主要是学习慕课网实战视频<Java并发编程入门与高并发面试>的笔记 原子性:指一个操作不可中断,一个线程一旦开始,直到执行完成都不会被其他线程干扰.换 ...
- ajaxFileUpload onchang上传文件插件第二次失效刷新一次才能再次调用触发change事件
关于用ajaxfileupload时,遇到一个要刷新一次页面才能再次上传, ajaxFileUpload 用onchang上传只能上传一次 第二次就失效了 我找这个问题找了很长时间 ajaxFileU ...
- JAVA设计模式——开篇
设计模式很重要,重要性我就不再复述了.最主要的是,通常我们在写一定量代码后,常用的方法什么的都熟悉后,想再提高代码能力,我找到的最好的方法还是去学习,理解设计模式.不理解设计模式,看一些开源框架和ja ...
- springboot之JdbcTemplate
springboot可以使用JdbcTemplate进行数据库访问,代码如下 添加pom文件 <parent> <groupId>org.springframework.boo ...