三水

`::after`

::after 会创建一个伪元素，作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容

HTMLCSS

HTML

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

CSS

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 伪元素是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）

CSS

/* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 */
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}

`::before`

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素

HTMLCSS

HTML

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

CSS

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提示

CSS

::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

`::cue-region`

CSS伪元素与所选元素内的WebVTT提示相匹配

CSS

::cue-region {
  color: yellow;
  font-weight: bold;
}

`::file-selector-button`

::file-selector-button CSS 伪元素代表 type="file" 的 <input> 的按钮

HTMLCSS

HTML

<label for="avatar">Choose a profile picture:</label><br />

<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />

CSS

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（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容

CSS

/* 使每段开头的第一个字母变红变大 */

p::first-letter {
  /* 使用:first 来兼容 IE8- */
  color: red;
  font-size: 130%;
}

`::first-line`

::first-line（CSS 伪元素）在某 block-level element （块级元素）的第一行应用样式

HTMLCSS

HTML

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore.
</p>

CSS

p::first-line {
  text-transform: uppercase;
}

`::grammar-error`

::grammar-error 伪元素应用于浏览器标识为语法错误的文本段

`::highlight()`

::highlight() CSS 伪元素用于设置自定义高亮样式。

HTMLCSSjs

HTML

<p id="rainbow-text">CSS 自定义高亮 API——彩虹色</p>

CSS

#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 伪元素匹配列表的标记框（通常为一个符号或数字）

HTMLCSS

HTML

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

CSS

li::marker {
  content: '✝ ';
  font-size: 1.2em;
}

`::part()`

::part CSS 伪元素表示在阴影树中任何匹配 part 属性的元素

HTMLCSSjs

HTML

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

CSS

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> 元素中的占位文本

HTMLCSS

HTML

<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" />

CSS

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

`::selection`

::selection CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

HTMLCSS

HTML

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS

/* 选中的文本是红色背景，金黄色的字体 */
::selection {
  color: gold;
  background-color: red;
}

/*选中的是蓝色背景，白色的字体的段落*/
p::selection {
  color: white;
  background-color: blue;
}

`::slotted()`

:slotted() CSS 伪元素用于选定那些被放在 HTML 模板中的元素

HTMLCSSjs

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>

CSS

/* 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 伪元素表示浏览器标记为不正确拼写的文本段

CSS

::spelling-error {
  color: red;
}

`::target-text`

::target-text CSS 伪元素代表了浏览器在支持文本片段技术时所滚动到的文字

CSS

::target-text {
  background-color: rebeccapurple;
  color: white;
}

::after ​

::backdrop ​

::before ​

::cue ​

::cue-region ​

::file-selector-button ​

::first-letter ​

::first-line ​

::grammar-error ​

::highlight() ​

::marker ​

::part() ​

::placeholder ​

::selection ​

::slotted() ​

::spelling-error ​

::target-text ​

`::after`

`::backdrop`

`::before`

`::cue`

`::cue-region`

`::file-selector-button`

`::first-letter`

`::first-line`

`::grammar-error`

`::highlight()`

`::marker`

`::part()`

`::placeholder`

`::selection`

`::slotted()`

`::spelling-error`

`::target-text`