::after
::after 会创建一个伪元素,作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容
<p>
The sailfish is named for its sail-like dorsal fin and is widely considered the fastest fish in the ocean.
<a href="https://en.wikipedia.org/wiki/Sailfish">You can read more about it here</a>.
</p>
<p>
The red lionfish is a predatory scorpionfish that lives on coral reefs of the Indo-Pacific Ocean and more recently in
the western Atlantic. <a href="" class="dead-link">You can read more about it here</a>.
</p>
a::after {
content: ' (' attr(href) ')';
}
.dead-link {
text-decoration: line-through;
}
.dead-link::after {
content: url('../../media/warning.svg');
display: inline-block;
width: 12px;
height: 12px;
}
::backdrop
::backdrop CSS 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子(并且在所有其他在堆中的层级更低的元素之上)
/* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 */
dialog::backdrop {
background: rgba(255, 0, 0, 0.25);
}
::before
::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素
<p>
Learning resources for web developers can be found all over the internet. Try out
<a href="https://web.dev/">web.dev</a>, <a href="https://www.w3schools.com/">w3schools.com</a> or our
<a href="https://developer.mozilla.org/" class="local-link">MDN web docs</a>.
</p>
a {
color: #0000ff;
text-decoration: none;
}
a::before {
content: '🔗';
}
.local-link::before {
content: url('../../media/examples/firefox-logo.svg');
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
}
::cue
::cue CSS 伪元素匹配所选元素中的WebVTT提示
::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
}
::cue-region
CSS伪元素与所选元素内的WebVTT提示相匹配
::cue-region {
color: yellow;
font-weight: bold;
}
::file-selector-button
::file-selector-button CSS 伪元素代表 type="file" 的 <input>
的按钮
<label for="avatar">Choose a profile picture:</label><br />
<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />
input {
margin-top: 1rem;
}
input::file-selector-button {
font-weight: bold;
color: dodgerblue;
padding: 0.5em;
border: thin solid grey;
border-radius: 3px;
}
::first-letter
::first-letter会选中某 block-level element(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容
/* 使每段开头的第一个字母变红变大 */
p::first-letter {
/* 使用:first 来兼容 IE8- */
color: red;
font-size: 130%;
}
::first-line
::first-line(CSS 伪元素)在某 block-level element (块级元素)的第一行应用样式
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore.
</p>
p::first-line {
text-transform: uppercase;
}
::grammar-error
::grammar-error 伪元素应用于浏览器标识为语法错误的文本段
::highlight()
::highlight() CSS 伪元素用于设置自定义高亮样式。
<p id="rainbow-text">CSS 自定义高亮 API——彩虹色</p>
#rainbow-text {
font-family: monospace;
font-size: 1.5rem;
}
::highlight(rainbow-color-1) {
color: #ad26ad;
text-decoration: underline;
}
::highlight(rainbow-color-2) {
color: #5d0a99;
text-decoration: underline;
}
::highlight(rainbow-color-3) {
color: #0000ff;
text-decoration: underline;
}
::highlight(rainbow-color-4) {
color: #07c607;
text-decoration: underline;
}
::highlight(rainbow-color-5) {
color: #b3b308;
text-decoration: underline;
}
::highlight(rainbow-color-6) {
color: #ffa500;
text-decoration: underline;
}
::highlight(rainbow-color-7) {
color: #ff0000;
text-decoration: underline;
}
const textNode = document.getElementById("rainbow-text").firstChild;
if (!CSS.highlights) {
textNode.textContent = "此浏览器不支持 CSS 自定义高亮 API!";
}
// 创建并注册彩虹色中每种颜色的高亮。
const highlights = [];
for (let i = 0; i < 7; i++) {
// 为该颜色创建新的高亮。
const colorHighlight = new Highlight();
highlights.push(colorHighlight);
// 以自定义名称注册此高亮。
CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}
// 逐个字符迭代文本。
for (let i = 0; i < textNode.textContent.length; i++) {
// 专门为此字符创建一个新范围。
const range = new Range();
range.setStart(textNode, i);
range.setEnd(textNode, i + 1);
// 将该范围添加到下一个可用的高亮中,当达到第 7 个高亮时,循环回到第一个高亮。
highlights[i % 7].add(range);
}
::marker
::marker CSS 伪元素匹配列表的标记框(通常为一个符号或数字)
<p>Group known as Mercury Seven:</p>
<ul>
<li>Malcolm Scott Carpenter</li>
<li>Leroy Gordon (Gordo) Cooper Jr.</li>
<li>John Herschel Glenn Jr.</li>
<li>Virgil Ivan (Gus) Grissom</li>
<li>Walter Marty (Wally) Schirra Jr.</li>
<li>Alan Bartlett Shepard Jr.</li>
<li>Donald Kent (Deke) Slayton</li>
</ul>
li::marker {
content: '✝ ';
font-size: 1.2em;
}
::part()
::part CSS 伪元素表示在阴影树中任何匹配 part 属性的元素
<template id="tabbed-custom-element">
<style type="text/css">
*,
::before,
::after {
box-sizing: border-box;
padding: 1rem;
}
:host {
display: flex;
}
</style>
<div part="tab active">Tab 1</div>
<div part="tab">Tab 2</div>
<div part="tab">Tab 3</div>
</template>
<tabbed-custom-element></tabbed-custom-element>
tabbed-custom-element::part(tab) {
color: #0c0dcc;
border-bottom: transparent solid 2px;
}
tabbed-custom-element::part(tab):hover {
background-color: #0c0d19;
border-color: #0c0d33;
}
tabbed-custom-element::part(tab):hover:active {
background-color: #0c0d33;
}
tabbed-custom-element::part(tab):focus {
box-shadow:
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
}
tabbed-custom-element::part(active) {
color: #0060df;
border-color: #0a84ff !important;
}
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
template.id,
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content);
}
},
);
::placeholder
CSS 伪元素 ::placeholder 表示 <input>
或 <textarea>
元素中的占位文本
<label for="first-name">Your phone number:</label><br />
<input id="first-name" type="tel" name="phone" minlength="9" maxlength="9" placeholder="It must be 9 digits" />
input {
margin-top: 0.5rem;
}
input::placeholder {
font-weight: bold;
opacity: 0.5;
color: red;
}
::selection
::selection CSS 伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
/* 选中的文本是红色背景,金黄色的字体 */
::selection {
color: gold;
background-color: red;
}
/*选中的是蓝色背景,白色的字体的段落*/
p::selection {
color: white;
background-color: blue;
}
::slotted()
:slotted() CSS 伪元素用于选定那些被放在 HTML 模板中的元素
<template id="card-template">
<div>
<h2><slot name="caption">title goes here</slot></h2>
<slot name="content">content goes here</slot>
</div>
</template>
<my-card>
<span slot="caption">Error</span>
<p class="content" slot="content">Build failed!</p>
</my-card>
/* This CSS is being applied inside the shadow DOM. */
::slotted(.content) {
background-color: aqua;
}
h2 ::slotted(span) {
background: silver;
}
customElements.define(
'my-card',
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById('card-template');
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(template.content.cloneNode(true));
const elementStyle = document.createElement('style');
elementStyle.textContent = `
div {
width: 200px;
border: 2px dotted red;
border-radius: 4px;
}`;
shadow.appendChild(elementStyle);
const cssTab = document.querySelector('#css-output');
const editorStyle = document.createElement('style');
editorStyle.textContent = cssTab.textContent;
shadow.appendChild(editorStyle);
cssTab.addEventListener('change', () => {
editorStyle.textContent = cssTab.textContent;
});
}
},
);
::spelling-error
::spelling-error CSS 伪元素 表示浏览器标记为不正确拼写的文本段
::spelling-error {
color: red;
}
::target-text
::target-text CSS 伪元素代表了浏览器在支持文本片段技术时所滚动到的文字
::target-text {
background-color: rebeccapurple;
color: white;
}