fe-interview
fe-interview copied to clipboard
haizlin
[css] 第13天 ::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？
区别：
- 伪元素在css1中已经存在当时用单冒号，css3时做了修订用双冒号 ::before ::after表示伪元素用来区别伪类。
作用：
- 在元素前面（::before）和后面（::after）加内容
发现这道题和后面的题目有点类似，都是讲伪元素 :before 和 :after ，直接看这道题的解释吧，同样可以回答这个问题。
[css] 第19天 css的属性content有什么作用呢？有哪些场景可以用到？
针对这道题写了篇blog，原文链接：https://xiangshuo.blog.csdn.net/article/details/89843456 以下是回答。
认识 :before 和 :after
- 默认
display: inline； - 必须设置
content属性，否则一切都是无用功，content属性也只能应用在:before和:after伪元素上； - 默认user-select: none，就是
:before和:after的内容无法被用户选中； - 伪元素可以和伪类结合使用形如：
.target:hover:after。 -
:before和:after是在CSS2中提出来的，所以兼容IE8； -
::before和::after是CSS3中的写法，为了将伪类和伪元素区分开； - CSS 中其他的伪元素有：
::before、::after、::first-letter、::first-line、::selection等； - 不可通过DOM使用，它只是纯粹的表象。在特殊情况下，从一个访问的角度来看，当前屏幕阅读不支持生成的内容。
content 定义用法
content 属性与 :before 及 :after 伪元素配合使用，在元素头或尾部来插入生成内容。
说明： 该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的盒子类型可以用属性 display 控制。
MDN 对 content 的取值描述：
content: normal /* Keywords that cannot be combined with other values */
content: none
content: 'prefix' /* <string> value, non-latin characters must be encoded e.g. \00A0 for */
content: url(http://www.example.com/test.html) /* <uri> value */
content: chapter_counter /* <counter> values */
content: attr(value string) /* attr() value linked to the HTML attribute value */
content: open-quote /* Language- and position-dependant keywords */
content: close-quote
content: no-open-quote
content: no-close-quote
content: open-quote chapter_counter /* Except for normal and none, several values can be used simultaneously */
content: inherit
content: <string> value 字符串
可以加入任何字符，包括 Unicode 编码等各种字符。
<a class="demo" href="https://www.xunlei.com/" title="精彩，一下就有">精彩，一下就有</a>
.demo:after{
content: "↗"
}
我们还可以通过 content 内字符串的变化，实现类似 加载中... 的动画效果
.demo:after{
animation: dot 1.6s linear both;
}
@keyframe dot{
0%{ content: "." }
33%{ content: ".." }
66%{ content: "..." }
100%{ content: "." }
}
类似的，还有种实现方式，steps阶梯函数实现元素位移
<a class="demo" href="https://www.xunlei.com/" title="精彩，一下就有">精彩，一下就有<dot>...</dot></a>
dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot2 1.6s infinite step-start both;
}
@keyframes dot2 {
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
content: <uri> value 外部资源
用于引用媒体文件，图片，图标，SVG等。
.demo:after{
content: url(https://img-vip-ssl.a.88cdn.com/img/xunleiadmin/5b9889e14dcdc.png);
}
受 background-image: url() 可以用渐变实现背景启发，类似的，一些函数是不是可以放在 content 中来实现？
.demo:after {
content: radial-gradient(circle at 35% 35%, white 10%, pink 70%);
display: inline-block;
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
}
完美！当然本来就伪元素背景就可以实现，又为什么要放 content 呢？
content: attr() value 属性值的引用
调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。
.demo:after{
content: attr(href);
}
.demo:after{
content: attr(class);
}
content: <counter> values
调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h1>大标题</h1>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
<h2>中标题</h2>
<h3>小标题</h3>
<h3>小标题</h3>
h1::before{
content:counter(h1)'.';
}
h1{
counter-increment:h1;
counter-reset:h2;
}
h2::before{
content:counter(h1) '-' counter(h2);
}
h2{
counter-increment:h2;
counter-reset:h3;
margin-left:40px;
}
h3::before{
content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
counter-increment:h3;
margin-left:80px;
}
引用符号
属于引用符号的取值有 4 种，共 2 对，在 CSS 中用了语义较为清晰的关键词来表示： open-quote、 close-quote、no-open-quote、no-close-quote。
默认：
.demo::before {
content: open-quote;
}
.demo::after {
content: close-quote;
}
自定义引用符号：
.demo {
quotes: "『" "』";
}
.demo::before {
content: open-quote;
}
.demo::after {
content: close-quote;
}
quotes 可以设置多组引用符号，用以应对次级引用：
.demo {
quotes: "«" "»" "‹" "›";
}
.demo::before {
content: no-open-quote open-quote;
}
.demo::after {
content: close-quote;
}
总结
以上我们主要了解了 content 的一些用法和巧用，当然 :before 和 :after 本身作为元素，也可以实现多种应用效果，比如：三角形（border）、装饰元素、阴影等。希望通过以上介绍，能让大家对 content 有更深入的了解，帮助我们在平时的布局和样式以及用户体验中发挥更大的价值。
Demo codepen 地址：https://codepen.io/xiangshuo1992/pen/zQGyBW
END.
::是伪元素 ::after::before::first-letter:first-line :是伪类 :active:hover:link:focus:visited
- :表示伪类，是一种样式，比如:hover, :active等
- ::表示伪元素，是具体的内容，比如::before是在元素前面插入内容，::after则是在元素后面插入内容，不过需要content配合，并且插入的内容是inline的。
- :before和:after其实还是表示伪元素，在css3中已经修订为::before和::after了，只是为了能兼容IE浏览器，所以也可以表示成:before和:after
:: 和 : 是 CSS3 中为了区别伪类和伪元素所用的不同的写法。:: 表示伪元素，目前两种写法都被兼容。
::before,::after 可以在一个 DOM 元素的前面和后面增加一个伪元素。可以用来清除浮动、为元素增加特殊效果（如前面有特殊符号等）。
::before 和 ::after 默认添加的是 inlne 元素，通过 content 属性来设置展示的内容，并且必须要设置 content 属性。content 属性可以利用 attr 与元素的相关内容做联动。
详细设置和用法可以参考 css 伪元素:before 和:after 用法详解
::是css3为了区分伪类和伪元素新增的 ::伪元素 :伪类
::before在元素内部的最开头添加元素或者content ::after与之相反，在元素内部的最结尾
:表示伪类，是一种样式，比如:hover, :active等 ::表示伪元素，是具体的内容，比如::before是在元素前面插入内容，::after则是在元素后面插入内容，不过需要content配合，并且插入的内容是inline的。 :before和:after其实还是表示伪元素，在css3中已经修订为::before和::after了，只是为了能兼容IE浏览器，所以也可以表示成:before和:after
区别
-
单冒号 ： 表示伪类，伪类是选择器的一种，它用于选择处于特定状态的元素
-
双冒号 ：： 表示伪元素，伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类
-
起初在
CSS2.1里，:before和:after表示伪元素后来在
CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素
伪元素作用
-
::after/::before用来创建一个伪元素`，作为已选中元素的 最后一个子元素 / 第一个子元素通常会配合
content属性来为该元素添加装饰内容此元素默认为行内元素
-
通过对它们进行任何的CSS样式设置，例如，改变它们的前景颜色，增加背景色/图，调整字体大小，调整对齐方式等
来装饰内容 (无论是装饰图片还是音效) 而不需要更改 HTML 的内容，从而帮助内容与样式更好地分离
:before,:after是在CSS2中提出的，所以兼容IE8,::before,::after是在CSS3中的写法，为了将伪类和伪元素区分开。这两个伪类特有属性content,用于在CSS渲染中向元素逻辑上的头部或尾部添加内容。
伪类和伪元素，原本都是单冒号的，css3为了区别将伪元素用双冒号，作用其实都是差不多的，在元素前面或者后面插入内容，而不增加dom，写单冒号可以更好兼容，
-
单冒号 ： 表示伪类，伪类是选择器的一种，它用于选择处于特定状态的元素
-
双冒号 ：： 表示伪元素，伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类
-
在元素前面（::before）和后面（::after）加内容
