Pseudo-elements
伪元素是前面有两个冒号的关键字,其可以添加于选择器的末尾,用以选择元素的某个部分。
::after
创建一个处于被选定元素最末尾的伪元素。同 content 属性一起使用来向被选定元素添加装饰性内容,它默认是内联的。
/* CSS3 syntax */
::after
/* CSS2 syntax */
:after
/* Add an arrow after links */
a::after {
content: "→";
}
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>
<br>
<hr>
<br>
<span class="ribbon">Look at the orange box after this text. </span>
<br>
<hr>
<br>
<p>Here we have some
<span data-descr="collection of words and punctuation">text</span> with a few
<span data-descr="small popups that appear when hovering">tooltips</span>.
</p>
.exciting-text::after {
content: " <- EXCITING!";
color: green;
}
.boring-text::after {
content: " <- BORING";
color: red;
}
.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
content: "This is a fancy orange box.";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}
::before
创建一个处于被选定元素最首的伪元素。同 content 属性一起使用来向被选定元素添加装饰性内容,它默认是内联的。
/* Add a heart before links */
a::before {
content: "♥";
}
/* CSS3 syntax */
::before
/* CSS2 syntax */
:before
<q>Some quotes,</q> he said, <q>are better than none.</q>
<br>
<hr>
<br>
<span class="ribbon">Notice where the orange box is.</span>
<br>
<hr>
<br>
<ul>
<li>Buy milk</li>
<li>Take the dog for a walk</li>
<li>Exercise</li>
<li>Write code</li>
<li>Play music</li>
<li>Relax</li>
</ul>
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
.ribbon {
background-color: #5BC8F7;
}
.ribbon::before {
content: "Look at this orange box.";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}
li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey;
font-family: sans-serif;
}
li.done {
background: #CCFF99;
}
li.done::before {
content: '';
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3em 0.25em 0;
height: 1em;
top: 1.3em;
left: 0.6em;
margin-top: -1em;
transform: rotate(45deg);
width: 0.5em;
}
var list = document.getElementsByTagName("ul");
list.addEventListener("click", function (ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("done");
}
}, false);
::first-letter
应用样式于一个块级元素的第一行的第一个字母,前题是块级元素前再无其它内容。
/* Selects the first letter of a <p> */
p::first-letter {
font-size: 130%;
}
/* CSS3 syntax */
::first-letter
/* CSS2 syntax */
:first-letter
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat.</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>
P::first-letter {
color: red;
font-size: 130%;
}
::first-line
应用样式于一个块级元素的第一行。注意首行的长度基于很多因素的影响,包括元素的宽度,文档的宽度,文字的字体尺寸。
/* Selects the first line of a <p> */
p::first-line {
color: red;
}
/* CSS3 syntax */
::first-line
/* CSS2 syntax */
:first-line
<p>Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?</p>
<span>The first line of this text will not receive special styling
because it is not a block-level element.</span>
::first-line {
color: blue;
text-transform: uppercase;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-elements */
margin-left: 20px;
text-indent: 20px;
}
::selection
应用样式于由用户突出显示的文档部分。
此伪元素只能同以下 CSS 属性一起使用: color background-color cursor caret-color outline text-decoration text-emphasis-color text-shadow
::selection {
background: cyan;
}
/* Legacy Firefox syntax (version 61 and below) */
::-moz-selection
::selection
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
/* Make selected text gold on a red background */
::selection {
color: gold;
background: red;
}
/* Make selected text in a paragraph white on a blue background */
p::selection {
color: white;
background: blue;
}
::backdrop
即刻渲染出一个视口大小的框,呈现于处于全屏模式的元素下面。此伪元素处于试验阶段,注意浏览器兼容性。
/* Backdrop is only displayed when dialog is opened with dialog.showModal() */
dialog::backdrop {
background: rgba(255,0,0,.25);
}