伪元素 Pseudo-elements
1、::after (:after)
::after 创建了一个伪元素，它是所选元素的最后一个子元素。通过其 content 属性向元素添加修饰性内容。默认情况下，它是内联的。
/* Add an arrow after links */
a::after {
content: "→";
}
注意： 由 ::before 和 ::after 生成的伪元素包含在元素的格式框中，因此不适用于 Replaced elements，如 img iframe video embed br 等。
语法：
/* CSS3 syntax */
::after
/* CSS2 syntax */
:after
示例：
HTML
<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>
CSS
.exciting-text::after {
content: " <- EXCITING!";
color: green;
}
.boring-text::after {
content: " <- BORING";
color: red;
}
示例二：装饰的例子
HTML
<span class="ribbon">Look at the orange box after this text. </span>
CSS
.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
content: "This is a fancy orange box.";
background-color: #FFBA10;
border-color: black;
border-style: dotted;
}
示例三：
HTML
<p>Here we have some
<span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few
<span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>.
</p>
CSS
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after,
span[data-descr]:focus::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;
}
2、::before (:before)
大部分的使用同 ::after，可以参考上面的。
示例一：
HTML
<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>
CSS
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;
}
JavaScript
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('done');
}
}, false);
示例二：特殊字符
HTML
<ol>
<li>Crack Eggs into bowl</li>
<li>Add Milk</li>
<li>Add Flour</li>
<li aria-current='step'>Mix thoroughly into a smooth batter</li>
<li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
<li>Fry until the top of the pancake loses its gloss</li>
<li>Flip it over and fry for a couple more minutes</li>
<li>serve with your favorite topping</li>
</ol>
CSS
li {
padding:0.5em;
}
li[aria-current='step'] {
font-weight:bold;
}
li[aria-current='step']::after {
content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
display: inline;
}
3、::first-letter (:first-letter)
对块级元素的第一行的第一个字母应用样式，但只在前面没有其他内容(如图像或内联表)的情况下。
语法：
/* CSS3 syntax */
::first-letter
/* CSS2 syntax */
:first-letter
示例：
HTML
<h2>My heading</h2>
<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>
CSS
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}
示例二：对特殊标点符号和非拉丁字符的影响
HTML
<p>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>
CSS
p::first-letter {
color: red;
font-size: 150%;
}
4、::first-line (:first-line)
将样式应用于 块级元素 的 第一行。
语法：
/* Selects the first line of a <p> */
p::first-line {
color: red;
}
注意： ::first-line 的效果受到元素中第一行文本的长度和内容的限制。第一行的长度取决于许多因素，包括元素的宽度、文档的宽度和文本的字体大小。当元素的第一个子元素(即第一行的第一部分)是内联块级元素(例如内联表)时，::first-line 不起作用。
示例：
HTML
<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>
CSS
::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;
}
5、::selection
将样式应用到用户高亮显示的文档部分(例如在文本上单击和拖动鼠标)。
允许的属性
- color
- background-color
- text-decoration
- text-shadow
- stroke-color fill-color stroke-width
示例：
HTML
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
CSS
/* Make selected text gold on a red background */
::selection {
color: gold;
background-color: red;
}
/* Make selected text in a paragraph white on a blue background */
p::selection {
color: white;
background-color: blue;
}
网友评论