48a2f7b3ef
* adds example * change to simplified Chinese We currently only work on simplified Chinese
3.2 KiB
3.2 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Before Selector | 选择器之前 |
选择器之前
CSS :: before选择器可用于在内容元素之前插入任何内容。它允许设计者在元素中的内容之前执行任何css设计。它通过将**:: before**附加到要使用的元素上来使用。
我们来看一些例子：
p::before {
content: "";
border: solid 5px #ccc
}
span.comment::before{
content: "Comment: ";
color: blue;
}
<p> To infinity and beyond</p>
<p> I am buz 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>
在上面的示例中，我们在页面上的每个段落元素之前添加了一个灰色边框，并且我们还在每个span元素之前使用类注释添加了蓝色注释。
你可以在这里查看这个演示:https://jsfiddle.net/398by400/
定义和用法
::before是CSS伪元素选择器之一，用于设置元素的指定部分的样式。在这种情况下，我们可以在CSS的某些HTML元素之前插入内容。虽然我们将在页面中看到内容，但它不是DOM的一部分，这意味着我们无法通过Javascript操纵它。解决这个障碍的一个技巧是：使用数据属性传递内容并使用jQuery来操作它。这是一个使用示例：
p::before {
content: "Hello ";
}
<p>world!!</p>
这将显示Hello world!!在页面中。
不仅字符串，图像，计数器甚至没有（“”，对于clearfix有用）都可以插入到content属性中，而不是HTML中 。以创造性的方式使用::before和after可以制作很多很酷的东西。如果你很好奇，你可以看看下一个链接： 伪元素可以做一堆惊人的东西
例子
你可以使用 ::befor 和 ::after 改变风格
<div>
<h1>AWESOME</h1>
</div>
*, *::before, *::after {box-sizing: border-box;}
body {
background-color: #bbbbbb;
}
div {
text-align: center;
position: relative;
}
h1{
color: #fff;
font-size: 30px;
padding: 5px 10px;
margin: 0;
}
h1::after {
content: '';
position: absolute;
top: 1.7em;
// bottom:5em;
left:2em;
right: 2em;
opacity: 1;
transition: transform ease-out 250ms;
border-top: 5px #01eddb solid;
transform: scale(0, 1);
}
h1:hover::after {
transform: scale(.25, 1);
}
li a:hover {
color: rgba(255,255,255, 0.7);
}
单结肠与双结肠
关于使用伪元素的正确方法有一些讨论：旧式单冒号（ :before ），在CSS规范1和2中使用，与CSS3 recomendation，双冒号（ ::before ），主要是为了_“建立”伪类和伪元素之间的区别“_ 。但出于兼容性原因，仍然接受单冒号。谈到兼容性，IE8仅支持单冒号表示法。