css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验。
一、概念:
1.定义
The CSS ::before(::after)
pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content
CSS property. This element is inline by default.
从定义我们知道::before和::after匹配一个虚拟元素,主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content
”属性,默认是内联元素。
其实::after和::before被引入css中,最核心的目的,还是为了实现语义化。在我们实际开发时候经常有这样的经历,为了实现一些效果,在文档中创建了一些没有实际内容的节点,或者加入辅助样式的文本,如:
<style>
ul{
list-style: none;
}
li{
display: inline;
}
</style>
<nav>
<ul>
<li>HTML 5</li>
<li>|</li>
<li>CSS3</li>
<li>|</li>
<li>JavaScript</li>
</ul>
</nav>
显示的时候是这样子的:
很明显,例子中的“|”仅是显示时候用的间隔符,没有实际的意义,而他所在的li元素仅是为了装饰才被创建的,本是不应该被创建在文档内的。那么能不能由样式(css)去创建出节点把他们代替掉呢?
出于这样的需求,就诞生了::after和::before,这两个伪元素相当于是对当前元素的装潢,他们并不是节点,不会出现在dom树中,但是在显示上具备节点的效果。我们使用::after和::before重构一下上边的代码:
<style>
ul{
list-style: none;
}
li{
display: inline;
}
li:not(:last-child)::after{
content: "|";
}
</style>
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
显示效果没有变化,但是文档结构变得清晰了多了。
2.使用
::after和::before的使用很简单,可以认为其所在元素上存在一前一后的两个的元素,这两个元素默认是内联元素,但我们可以为其增添样式。::after和::before使用的时候一定要注意,必须设置content,否则这两个伪元素是无法显示出来的。而content属性,会作为这两个伪元素的内容嵌入他们中。如:
<style>
p:before{
content: "H";
p:after{
content: "d";
}
</style>
<p>ello Worl</p>
显示为完整的Hello World。
::after和::before是虚拟元素,不会影响真正元素的所在文档的位置,对:first-child或者:last-child这种伪类选择不会造成影响。
3.操作
::after和::before是虚拟节点,而不是正在的节点,不在documont里面找到对应Node对象,在之前的例子中,我们执行下列js代码:
console.log( document.querySelector("ul").childNodes);
得到的是一个只有3个节点的NodeList对象,而两个伪元素并不在对象中。因为::after和::before不是真正的节点,所以我们取不到他们,也不发设置点击等用户事件。::after和::before虽然是不能设置事件,但还会捕获用户事件,并把事件“冒泡”到伪元素所在的元素上。之所以“冒泡”二字加了引号,是因为他不是真的冒泡,更准确的说::after和::before帮所在元素去捕获去事件,事件的srcElement对象是伪元素所在的元素,而不是伪元素本身。
document不能获取到::after和::before所对应的节点对象,但是可以通过css的接口获取其样式属性,如:
window.getComputedStyle(
document.querySelector('li'), ':before'
)
返回是个CSSStyleDeclaration对象,可以获取当前的style值。
转载自:https://www.cnblogs.com/laden666666/p/6089880.html
什么是图片字体?
类似于图片的字体,在使用过程中,可以对其进行样式的更改,而图片有时候的样式更改需要进行重新设计(变色,倾斜)
怎么使用图标字体?
下面给出IcoMoon 具体使用方法
1、打开IcoMoon 网站,点击IconMoon App。
2、打开后是具体图标的界面,可以自己添加自己的图标进行生成,也可以选用他给出的图标,在默认图标的下方 会有add Icons From Library 点击后可以看到更多的图标供选择(有免费的有付费的)。
3、点击Generate Font后会生成 当前选择的图标的界面,右下角的Generate Font 也会变成 Download ,也可以进行相关的下载设置(例如:让其支持ie6/7之类的)。
4、下载完成后 会有以下文件,这些文件都最好保存下来,不要随意删掉。
5、接下来给出图标字体的具体使用方法(也可以自行看使用图标字体的css文件——style.css的相关内容)
(1)、将字体文件夹复制到项目中并且声明字体,为什么引入多个文件,因为有些浏览器支持的格式不一样(此处代码不需要记忆,因为基本上都一样,直接复制即可)
@font-face { font-family: 'icomoon';/*声明字体名称,可自行设置,应用的时候对应即可*/ src: url('fonts/icomoon.eot?lep7lm'); src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lep7lm') format('truetype'), url('fonts/icomoon.woff?lep7lm') format('woff'), url('fonts/icomoon.svg?lep7lm#icomoon') format('svg'); font-weight: normal; font-style: normal; }
(2)、使用字体
.IconMoon { font-family: 'icomoon'; }
(3)、具体显示对应图标
使用css 伪元素选择器before 来进行添加
<li><span class="icon-home">在这前面有一个home图标</span></li> <li><span class="icon-smile2">在这前面有一个smile2图标</span></li> <li><span class="icon-tongue2">在这前面有一个tongue2图标</span></li> <li><span class="icon-sad2">在这前面有一个sad2图标</span></li> <li><span class="icon-wink">在这前面有一个wink图标</span></li>
对应的css代码为:
.icon-home:before {/*content的值是对应的图标代码*/
content: "\e900";
}
.icon-smile2:before {
content: "\e9e2";
} .icon-tongue2:before {
content: "\e9e4";
} .icon-sad2:before {
content: "\e9e6";
}
.icon-wink:before {
content: "\e9e7"; }
(4)、正如之前所说,这些图标本质上是字体,所以可以很方便的去改变颜色,大小,产生阴影效果等
具体的代码如下
6、当我们想要给字体添加新的图标或者减去一些图标时,只需再次打开网站,进入到IconMoon App 页面,然后点击 Import Icons 将之前我们下载的字体文件目录下的selection.json 文件,就可以在我们之前选中的基础上再次进行操作了,用起来非常的方便。
以上相关内容是对php中文网相关内容的总结。
css的伪元素 ::after ::before 和 图标字体的使用的更多相关文章
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- CSS的伪元素(二)
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...
- css的伪元素
这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- 笑谈CSS的伪元素
今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- CSS 的伪元素是什么?
CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
随机推荐
- sqlplus登录时密码有特殊符号解决方法
偶然百度得到解决方法,在查看了公司有的脚本使用了这种解决方式,特记录下来,有需要的可以点击文末的链接查看原文. 本文转载https://www.cnblogs.com/lhrbest/p/656090 ...
- ES6.x
类 class Animal{ constructor(name){ this.name=name } Spack(){ console.log(name) } } class Dog extends ...
- 苹果 macOS 安装 Source Code Pro
1. 下载 到 Source Code Pro 的 GitHub 官网下载:https://github.com/adobe-fonts/source-code-pro 点击 GitHub 中 ...
- 【西北师大-2108Java】第十一次作业成绩汇总
[西北师大-2108Java]第十一次作业成绩汇总 作业题目 面向对象程序设计(JAVA) 第13周学习指导及要求 实验目的与要求 (1)掌握事件处理的基本原理,理解其用途: (2)掌握AWT事件模型 ...
- 【洛谷5369】[PKUSC2018] 最大前缀和(状压DP)
点此看题面 大致题意: 对于一个序列,求全排列下最大前缀和之和. 状压\(DP\) 考虑如果单纯按照题目中对于最大前缀和的定义,则一个序列它的最大前缀和是不唯一的. 为了方便统计,我们姑且规定,如果一 ...
- 用dotnet core 搭建web服务器(一)http server
环境说明 dotnet core,开发需要安装dotnetcore sdk,运行需要安装 dotnetcore runtime 运行目前几乎支持所有常见平台 开发推荐windows10 平台 首先安装 ...
- flash的几种模式Normal Mode、DUAL Mode、Quad Mode的概念和区别
概念 1. 标准SPI 标准SPI通常就称SPI,它是一种串行外设接口规范,有4根引脚信号:clk , cs, mosi, miso 2. Dual SPI 它只是针对SPI Flash而言,不是针对 ...
- new String()与toString
str.toString是调用了str这个object对象的类的toString方法.一般是返回这么一个String:[class name]@[hashCode].new String(str)是根 ...
- Linux下Mysql安装教程详解
Linux下软件安装一般有三种方式:RPM包方式(通过Redhat 第三方包管理系统).二进制包和源码包.本篇主要介绍二进制包安装mysql数据库的方式. 如何获取二进制源码包 当然是到mysql官网 ...
- ASP.NET MVC教程五:ASP.NET MVC中的路由
一.概述 在ASP.NET MVC架构中,控制器在3大核心构件中处于中心地位,通过控制器支配模型和视图,然而从浏览器发出的请求到控制器还需要路由的协助,路由将特定的请求和控制器的动作对应起来. 在AS ...