css 选择器 伪元素_CSS伪元素-解释选择器之前和之后
css 选择器 伪元素
选择器之前 (Before Selector)
The CSS ::before selector can be used to insert content before the content of the selected element or elements. It is used by attaching ::before to the element it is to be used on.
CSS ::before选择器可用于在选定元素或多个元素的内容之前插入内容。 通过将::before附加到要使用的元素上来使用它。
Let’s look at some examples:
让我们看一些例子：
p::before { content: "* ";
}span.comment::before {content: "Comment: ";color: blue;
}<p> To infinity, and beyond!</p>
<p> I am Buzz Lightyear. I come in peace.</p><span class="comment">May the force be with you.</span>
<br/>
<span> Do. Or do not. There is no try.</span>In the example above we are prepending an asterisk and a space before every paragraph element on the page. Also, we're prepending "Comment: " in blue before every span element with the class comment.
在上面的示例中，我们在页面上每个段落元素之前加一个星号和一个空格。 另外，我们在每个span元素之前，在带有class comment蓝色前添加“ Comment：”。
选择器之后 (After Selector)
The CSS ::after selector can be used to insert content after the content of the selected element or elements. It's used by attaching ::after to the element it is to be used on.
CSS ::after选择器可用于在一个或多个选定元素的内容之后插入内容。 通过将::after附加到要使用的元素上来使用。
Here are some examples:
这里有些例子：
.buzz::after { content: " - Buzz Lightyear";color: blue;
}.yoda::after { content: " - Yoda";color: green;
}<p class="buzz"> To infinity, and beyond!</p>
<p class="yoda"> Do. Or do not. There is no try.</p>In the example above, we're appending " - Buzz Lightyear" in blue to the element with the class buzz. Also, we're appending " - Yoda" in green to the element with the class yoda.
在上面的示例中，我们将蓝色的“-Buzz Lightyear”附加到具有buzz类的元素上。 另外，我们在类yoda的元素后面添加绿色的“ yoda 。
单冒号与双冒号 (Single-colon vs. Double-colon)
There’s a bit of discussion about the right way of using pseudo-elements – the old style single-colon (:before), used in CSS specifications 1 and 2, versus the CSS3 recommendation, double-colon (::before), mainly to “establish a discrimination between pseudo-classes and pseudo-elements”.
关于使用伪元素的正确方法，有一些讨论– CSS规范1和2中使用的旧样式单冒号( :before )与CSS3建议双冒号( ::before )，主要是为了“在伪类和伪元素之间建立区分” 。
But for compatibility reasons, the single-colon method is still accepted. Keep in mind that IE8 supports the single-colon notation only.
但是出于兼容性原因，单冒号方法仍然被接受。 请记住，IE8仅支持单冒号表示法。
更多信息： (More Information:)
The CSS Handbook: a handy guide to CSS for developers
CSS手册：面向开发人员CSS便捷指南
The Best CSS Examples and CSS3 Examples
最佳CSS范例和CSS3范例
翻译自: https://www.freecodecamp.org/news/css-pseudo-elements-before-and-after-selectors-explained/
css 选择器 伪元素
相关文章：
各种面试题啊1
技术 基础 1.为什么说Objective-C是一门动态的语言？ 什么叫动态静态 静态、动态是相对的，这里动态语言指的是不需要在编译时确定所有的东西，在运行时还可以动态的添加变量、方法和类 Objective-C 可以通过Runtime 这个运行时机制，…
PEP8 Python
写在前面 对于代码而言，相比于写，它更多是读的。 pep8 一、代码编排 缩进，4个空格的缩进，编辑器都可以完成此功能；每行最大长度79，换行可以使用反斜杠，换行点要在操作符的后边。类和top-level函…
粒子滤波 应用_如何使用NativeScript开发粒子物联网应用
粒子滤波 应用If youre developing any type of IoT product, inevitably youll need some type of mobile app. While there are easy ways, theyre not for production use.如果您要开发任何类型的物联网产品，则不可避免地需要某种类型的移动应用程序。 尽管有简单…
wkwebView基本使用方法
WKWebView有两个delegate,WKUIDelegate 和 WKNavigationDelegate。WKNavigationDelegate主要处理一些跳转、加载处理操作，WKUIDelegate主要处理JS脚本，确认框，警告框等。因此WKNavigationDelegate更加常用。 比较常用的方法： #p…
引用类型(一)：Object类型
对象表示方式 1、第一种方式：使用new操作符后跟Object构造函数 var person new Object();<br/> person.name Nicholas;<br/> person.age 29; 2、对象字面量表示法 var person {name:Nicholas,age:29 } *:在age属性的值29的后面不能添加逗号…
（第四周）要开工了
忙碌的一周又过去了，这周的时间很紧，但是把时间分配的比较均匀，考研复习和各门功课都投入了一定的精力，所以不像前三周一样把大多数时间都花费在了软件工程上。也因为结对项目刚开始，我们刚刚进行任务分工以及查找资料…
统计数字,空白符,制表符_为什么您应该在HTML中使用制表符空间而不是多个非空白空间（nbsp）...
统计数字,空白符,制表符There are a number of ways to insert spaces in HTML. The easiest way is by simply adding spaces or multiple character entities before and after the target text. Of course, that isnt the DRYest method.有多种方法可以在HTML中插入空格。…
Python20-Day02
1、数据 数据为什么要分不同的类型 数据是用来表示状态的，不同的状态就应该用不同类型的数据表示； 数据类型 数字（整形，长整形，浮点型，复数），字符串，列表，元组…
Android网络框架-OkHttp3.0总结
一、概述 OkHttp是Square公司开发的一款服务于android的一个网络框架，主要包含： 一般的get请求一般的post请求基于Http的文件上传文件下载加载图片支持请求回调，直接返回对象、对象集合支持session的保持github地址：https://githu…
第一天写，希望能坚持下去。
该想的都想完了，不该想的似乎也已经尘埃落定了。有些事情，终究不是靠努力或者不努力获得的。顺其自然才是正理。 以前很多次想过要努力，学习一些东西，总是不能成，原因很多： 1.心中烦恼，不想学…
mac gource_如何使用Gource显示项目的时间表
mac gourceThe first time I heard about Gource was in 2013. At the time I watched this cool video showing Ruby on Rails source code evolution:我第一次听说Gource是在2013年 。 当时，我观看了这段很酷的视频，展示了Ruby on Rails源代码的演变&a…
insert语句让我学会的两个MySQL函数
我们要保存数据到数据库，插入数据是必须的，但是在业务中可能会出于某种业务要求，要在数据库中设计唯一索引；这时如果不小心插入一条业务上已经存在同样key的数据时，就会出现异常。 大部分的需求要求我们出现唯一键冲突…
对PInvoke函数函数调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配。...
C#引入外部非托管类库时，有时候会出现“对PInvoke函数调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配”的报错。 通常在DllImport标签内加入属性CallingConventionCallingConvention.Cdecl即可解决该问题。 如： [Dll…
Python字符串方法用示例解释
字符串查找方法 (String Find Method) There are two options for finding a substring within a string in Python, find() and rfind().在Python中的字符串中有两个选项可以找到子字符串： find()和rfind() 。 Each will return the position that the substring …
关于命名空间namespace
虽然任意合法的PHP代码都可以包含在命名空间中，但只有以下类型的代码受命名空间的影响，它们是：类（包括抽象类和traits）、接口、函数和常量。在声明命名空间之前唯一合法的代码是用于定义源文件编码方式的 declare 语句…
一 梳理 从 HDFS 到 MR。
MapReduce 不仅仅是一个工具，更是一个框架。我们必须拿问题解决方案去适配框架的 map 和 reduce 过程很多情况下，需要关注 MapReduce 作业所需要的系统资源，尤其是集群内部网络资源的使用情况。这是MapReduce 框架在设计上的取舍，…
huffman树和huffman编码
不知道为什么，我写的代码都是又臭又长。 直接上代码： #include <iostream> #include <cstdarg> using namespace std; class Node{ public:int weight;int parent, lChildren, rChildren;Node(int weight, int parent, int lChildren, int …
react 监听组合键_投资组合中需要的5个React项目
react 监听组合键Youve put in the work and now you have a solid understanding of the React library.您已经完成工作，现在对React库有了扎实的了解。 On top of that, you have a good grasp of JavaScript and are putting its most helpful features to use …
Unity 单元测试(PLUnitTest工具)
代码测试的由来 上几个星期上面分配给我一个装备系统,我经过了几个星期的战斗写完90%的代码. 后来策划告诉我需求有一定的改动,我就随着策划的意思修改了代码. 但是测试(Xu)告诉我装备系统很多功能都用不上了. Xu: 我有300多项测试用例,现在有很多项都无法运行了. 你修改了部分…
Best Time to Buy and Sell Stock II
题目： Say you have an array for which the i th element is the price of a given stock on day i. Design an algorithm to find the maximum profit. You may complete as many transactions as you like (ie, buy one and sell one share of the stock multipl…
求给定集合的幂集
数据结构中说这个问题可以用类似8皇后的状态树解法。 把求解过程看成是一棵二叉树，空集作为root，然后遍历给定集合中的元素，左子树表示取该元素，右子树表示舍该元素。 然后，root的左右元素分别重复上述过程。 就形成…
angular 命令行项目_Angular命令行界面介绍
angular 命令行项目Angular is closely associated with its command-line interface (CLI). The CLI streamlines generation of the Angular file system. It deals with most of the configuration behind the scenes so developers can start coding. The CLI also has a l…
oracle-imp导入小错filesize设置
***********************************************声明*********************************************************************** 原创作品，出自 “深蓝的blog” 博客。欢迎转载，转载时请务必注明出处。否则追究版权法律责任。表述有错误之处…
CentOS 7 下用 firewall-cmd / iptables 实现 NAT 转发供内网服务器联网
自从用 HAProxy 对服务器做了负载均衡以后，感觉后端服务器真的没必要再配置并占用公网IP资源。 而且由于托管服务器的公网 IP 资源是固定的，想上 Keepalived 的话，需要挤出来 3 个公网 IP 使用，所以更加坚定了让负载均衡后端服务器…
八皇后的一个回溯递归解法
解法来自严蔚敏的数据结构与算法。 代码如下： #include <iostream> using namespace std; const int N 8;//皇后数 int count 0;//解法统计 int a[N][N];//储存值的数组const char *YES "■"; const char *NO "□"; //const char *Y…
即时编译和提前编译_即时编译说明
即时编译和提前编译Just-in-time compilation is a method for improving the performance of interpreted programs. During execution the program may be compiled into native code to improve its performance. It is also known as dynamic compilation.即时编译是一种提…
bzoj 2588 Spoj 10628. Count on a tree （可持久化线段树）
Spoj 10628. Count on a tree Time Limit: 12 Sec Memory Limit: 128 MBSubmit: 7669 Solved: 1894[Submit][Status][Discuss]Description 给定一棵N个节点的树，每个点有一个权值，对于M个询问(u,v,k)，你需要回答u xor lastans和v这两个节点…
.Net SqlDbHelper
using System.Configuration; using System.Data.SqlClient; using System.Data;namespace ExamDAL {class SqHelper{#region 属性区// 连接字符串private static string strConn;public static string StrConn{get{return ConfigurationManager.ConnectionStrings["Exam&…
C语言的一个之前没有见过的特性
代码： #include <stdio.h>int test(){int a ({int aa 0;int bb 1;int cc 2;if(aa 0 && bb 1)printf("aa %d, bb %d\n", aa, bb);//return -2;cc;});return a; }int main(){typeof(4) a test();printf("a %d\n", a); } …