css中(单冒号):after和(双冒号)::after的区别
:after是伪元素 。::after是伪类
什么是伪类?
CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。
element:after { style properties } /* CSS2 语法 */
element::after { style properties } /* CSS3 语法 */
.select::after {
content: "";
position: absolute;
top: 50%;
margin-top: -7px;
right: 10px;
display: inline-block;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
width: 14px;
height: 14px;
transform: rotate(-45deg);
}
css中(单冒号):after和(双冒号)::after的区别的更多相关文章
- python 里面的单下划线与双下划线的区别
python 里面的单下划线与双下划线的区别 Python 用下划线作为变量前缀和后缀指定特殊变量. _xxx 不能用'from moduleimport *'导入 __xxx__ 系统定义名字 __ ...
- CSS中px,em,rem,pt的区别及四者换算?
本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...
- 英文单词断行问题:CSS中word-break、word-wrap以及hyphens的兼容性和区别
CSS中一提到单词断行,最先映入脑海的肯定是word-break和word-wrap这两条属性.但对于这两条属性到底有什么区别,兼容性如何,我一直都概念模糊.今天抽空把它们以及CSS3中新加入的断行属 ...
- python单下划线与双下划线的区别
Python 用下划线作为变量前缀和后缀指定特殊变量. _xxx 不能用'from moduleimport *'导入 __xxx__ 系统定义名字 __xxx 类中的私有变量名 核心风格:避免用下划 ...
- 【python】单下划线与双下划线的区别
Python 用下划线作为变量前缀和后缀指定特殊变量. _xxx 不能用'from moduleimport *'导入 __xxx__ 系统定义名字 __xxx 类中的私有变量名 以单下划线开头(_f ...
- python 里面的单下划线与双下划线的区别(私有和保护)
Python 用下划线作为变量前缀和后缀指定特殊变量. _xxx 不能用'from moduleimport *'导入 __xxx__ 系统定义名字 __xxx 类中的私有变量名 核心风格:避免用下划 ...
- css中字体单位px,pt,em,百分比之间的区别和用法
px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em 相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem 结合相对定位和绝对定位的优势,相对根元素htm ...
- CSS 中 transform、animation、transition、translate的区别
在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...
- linux 中的单引号 和双引号有什么区别吗
单引号与双引号的最大不同在于双引号仍然可以保有变量的内容,但单引号内仅能是一般字符 ,而不会有特殊符号.我们以底下的例子做说明:假设您定义了一个变量, name=VBird ,现在想以 name 这个 ...
- css中的单位px,em和rem的区别
一.px: px就是像素,用px设置字体大小的时候会比较精确,但是有时候我们会使用不同屏幕尺寸去浏览网页.当页面相应的扩大或者缩小的时候,页面的字体大小就会出现过小或者过大.由于这种问题,就提出了使用 ...
随机推荐
- PHP中elseif与else if的区别
在PHP中,正常情况下elseif和else if的用法及效果是一样的,但在使用带冒号的if语句时(也就是php替代)情况会有点不一样,比如: <?php /*正确的写法*/ $a = 1; ...
- Xmind快速入门(基本操作够用了)
先选择结构--再选择风格 快捷键: 1.tab (产生子主题)2.enter (在下方产生并列主题) shift+enter (在上方产生并列主题)3.Alt+Enter (给某个主题添加标注)4.按 ...
- mac笔记本编译go-ethereum报错CoreServices/CoreServices.h' file not found
查看xcode是否安装: $ xcode-select --install xcode-select: error: command line tools are already installed, ...
- php 生成游戏兑换码(礼包)方法
最近项目中要做礼包码生成,看了看网上的代码,可以使用php扩展unid 当然我这里并不是用的unid,而是使用的php自带的uniqid,人狠话不多.看代码 /** * 生成礼包接口 100W数据同时 ...
- centOS7python版本升到3
我们使用Python源代码编译的方式安装python3. 一.安装必要工具 yum-utils ,它的功能是管理repository及扩展包的工具 (主要是针对repository) $ sudo y ...
- 一文了解服务端推送(含JS代码示例)
常用的服务端推送技术,包括轮询.长轮询.websocket.server-sent-event(SSE) 传统的HTTP请求是由客户端发送一个request,服务端返回对应response,所以当服务 ...
- javascript中indexOf()和lastIndexOf()详解
ECMAScript5为数组实例添加两方法:indexOf()和lastIndexOf().这两个方法接受两个参数:要查找的项和(可选的)表示查找起点位置的索引.其中,indexOf()方法从数组的开 ...
- .net 4.0 以下HttpWebRequest Header 修改hosts方法
.net 4.0 以下HttpWebRequest Header 修改hosts方法 特此记录 public class CusteredHeaderCollection : WebHeaderCol ...
- 机器学习- Attention Model结构解释及其应用
概述 Attention Model 的出现,在sequence model的领域中算是一个跨时代的事件.在Many-to-Many的sequence model中,在decoder network中 ...
- LeetCode42题,单调栈、构造法、two pointers,这道Hard题的解法这么多?
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题的第23篇文章. 今天来看一道很有意思的题,它的难度是Hard,并且有许多种解法. 首先我们来看题面,说是我们有若 ...