CSS 选择器 - Pseudo-elements

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

应用样式于一个块级元素的第一行的第一个字母，前题是块级元素前再无其它内容。

::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

应用样式于一个块级元素的第一行。注意首行的长度基于很多因素的影响，包括元素的宽度，文档的宽度，文字的字体尺寸。

::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);
}