CSS - 伪元素

CSS 中的伪元素是一个关键字，用于设置元素特定部分的样式。伪元素不是 DOM（文档对象模型）的一部分，也不存在于 HTML 标记中，但可以使用 CSS 对其进行定位和设置样式。

概述

伪元素用双冒号 (::) 表示法表示。另一方面，伪类使用单个冒号 (:)。
选择器中只能使用一个伪元素。
选择器中的伪元素必须出现在所有其他组件之后。例如，p::last-line:hover无效。
伪元素可用于添加装饰样式、创建特殊效果以及修改已应用状态的元素的某些部分的外观。例如，p:hover::last-line是一个有效的语句，当段落悬停时选择该段落的最后一行
伪元素通常与 content 属性结合使用来添加文本或图像。

当选择器列表包含无效选择器时，完整样式将被忽略。

句法

selector::pseudo-element {
   property: value;
}

下表显示了 CSS 中最常用的伪元素：

伪元素	描述
：：后	添加一个伪元素，它是所选元素的最后一个子元素。
：：背景	根据视口的大小在所选元素下方添加一个框。
：：前	添加一个伪元素，它是所选元素的第一个子元素。
::提示	用于设置带有视频文本轨道的媒体中的字幕和提示的样式。
::第一个字母	将样式应用于块级元素第一行的第一个字母。
：：第一行	将样式应用到块级元素的第一行。
::文件选择器按钮	表示 type="file" 的 <input> 的按钮。
::标记	选择列表项的标记框。
：：部分（）	表示影子树中具有匹配部分属性的元素。
::占位符	表示 <input> 或 <textarea> 元素中的占位符文本。
::选择	将样式应用到文档的选定部分（通过在文本上单击并拖动鼠标来选择）。
::开槽()	表示已放置到 HTML 模板内的槽中的元素。

浏览器支持四个原始伪元素的单冒号语法，即::before、::after、::first-line 和::first-letter。

CSS ::伪元素之后

以下示例演示了::after伪元素的使用：

<html>
<head>
<style>
   p:after {
      content: url(images/smiley.png)
   }
</style>
</head>
<body>
   <p> First line.</p>
   <p> Second line.</p>
   <p> Third line.</p>
</body>
</html>

CSS ::backdrop 伪元素

以下示例演示了::backdrop伪元素的使用：

<html>
<head>
<style>
      dialog::backdrop {
         background-image: url("images/border.png");
      }

      * {
         box-sizing: border-box;
      }
      body {
         margin: 0;
         font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         background-color: #3d3e3e;
         color: white;
      }
      .container {
         max-width: 100%;
         margin: 0 auto;
         padding: 2rem;
      }
      button {
         display: inline-block;
         border: 1px solid #007bff;
         padding: 5px;
         font-size: 1rem;
         color: black;
         background-color: #bfc2c5;
         cursor: pointer;
      }
      @supports not selector(::backdrop) {
         body::before {    
         box-sizing: border-box;
         content: '';
         }
      }
</style>
</head>
<body>
      <div class="container">
         <p>pseudo-element backdrop used to create a background</p>
         <button onclick="openDialog()">Click to Open dialog</button>
         <dialog>
            <p>See the backdrop</p>
            <button onclick="closeDialog()">Close</button>
         </dialog>  
      </div>
      <script>
         var dialog = document.querySelector('dialog');
         function openDialog() {  
         dialog.showModal();
         }
         function closeDialog() {  
         dialog.close();
         }
      </script>
</body>
</html>

CSS ::伪元素之前

以下示例演示了::before伪元素的使用：

<html>
<head>
<style>
   p:before {
      content: url(images/smiley.png)
   }
</style>
</head>
<body>
   <p> First line.</p>
   <p> Second line.</p>
   <p> Third line.</p>
</body>
</html>

CSS ::cue 伪元素

以下示例演示了::cue伪元素的使用：

<html>
<head>
<style>
    video {
        width: 800px;
    }

    video::cue {
        font-size: 1rem;
        color: peachpuff;
    }
</style>
</head>
<body>
    <video controls src="foo.mp4">
        <track default kind="captions" srclang="en" src="cue-sample.vtt" />
    </video>    
</body>
</html>

CSS ::首字母伪元素

以下示例演示了::first-letter伪元素的使用：

<html>
<head>
<style>
   p::first-letter { 
      text-transform: lowercase;
      font-size: 2em;
      color: red;
   }
</style>
</head>
<body>
   <p>
      The first line of this paragraph will be underlined and the first letter is lowercase, 2em and red in color, as pseudo-element ::first-line & ::first-letter is applied on p.<br />
      The second line is not underlined.
   </p>
</body>
</html>

CSS ::第一行伪元素

以下示例演示了::first-line伪元素的使用：

<html>
<head>
<style>
   p::first-line { 
      text-transform: lowercase;
      font-size: 2em;
      color: red;
   }
</style>
</head>
<body>
   <p>
      The first line of this paragraph will be underlined and the first letter is lowercase, 2em and red in color, as pseudo-element ::first-line & ::first-letter is applied on p.<br />
      The second line is not underlined.
   </p>
</body>
</html>

CSS ::文件选择器按钮伪元素

以下示例演示了::file-selector-button伪元素的使用：

<html> 
<head>
<style>
    body {
        display: block;
        height: 100vh;
        margin: 0;
        }

    input::file-selector-button {
        background-image:url(images/border.png);
        background-size: 200%;
        border: 2px solid black;
        border-radius: 8px;
        font-weight: 600;
        color: rgb(6, 1, 9);
        padding: 15px;
        transition: all 0.25s;
    }
</style>
</head>
<body>
    <h2>Select a file</h2>
    <input type="file">
</body>
</html>

CSS ::marker 伪元素

以下示例演示了::marker伪元素的使用：

<html> 
<head>
<style>
      ol li::marker {
         color: rgb(11, 38, 241);
         font-weight: bold;
      }
      ul li::marker {
         content: url('images/smiley.png')
      }
      body {
         line-height: 1.4;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
</style>
</head>
<body>
      <h2>Numbered list</h2>
      <ol>
         <li>One</li>
         <li>Two</li>
         <li>Three</li>
      </ol>
      <h2>Bulleted list</h2>
      <ul>
         <li>One</li>
         <li>Two</li>
         <li>Three</li>
      </ul>
</body>
</html>

CSS ::part() 伪元素

以下示例演示了::part()伪元素的使用：

<html> 
<head>
<style>
   .container {
      max-width: 500px;
      margin: 0 auto;
      padding: 2em;
   }

   body {
      font: 1em/1.618 Segoe UI, sans-serif;
   }

   new-widget::part(widget) {
      max-width: 300px;
      padding: 1em;
      background-color: lightgoldenrodyellow;
      border-radius: 20%;
   }
</style>
</head>
<body>
   <div class="container">
      <p>This paragraph is rendered as normal without any style.</p>
      <template id="new-widget">
         <div part="widget">
         <p>This paragraph is rendered as a part of the main paragraph and thus the ::part() pseudo-element is applied here.</p>
         </div>
         </template>
      <new-widget></new-widget>
      <script>
         let template = document.querySelector("#new-widget");
         globalThis.customElements.define(
         template.id,
         class extends HTMLElement {
         constructor() {
         super()
         .attachShadow({ mode: "open" })
         .append(template.content);
         }
         }
         );
      </script>       
   </div>
</body>
</html>

CSS ::占位符伪元素

以下示例演示了::placeholder伪元素的使用：

<html> 
<head>
<style>
   .form {
      border: 2px solid black;
      background: lightgray;
      margin: 15px;
      padding: 25px;
      width: 250px;
   }

   input::placeholder { 
      color: grey; 
      font-style: italic;
      background-color: cornsilk;
      padding: 5px;
   }

   input {
      margin-bottom: 3px;
   }
</style>
</head>
<body>
   <div class="form">
      <input type="text" placeholder="First Name">
      <input type="text" placeholder="Last Name">
      <input type="text" placeholder="Address">
      <input type="text" placeholder="Phone">
   </div>
</body>
</html>

CSS ::选择伪元素

以下示例演示了::selection伪元素的使用：

<html> 
<head>
<style>
   .highlight::selection { 
      color: yellow;
      background: brown;
   } 
</style>
</head>
<body>
   <p class="highlight">Select Me!!! to see the effect.</p>
   <p>No style applied to me.</p>
</body>
</html>

CSS ::slotted() 伪元素

以下示例演示了::slotted()伪元素的使用：

<html>
<head>
</head>
<body>
   <template id="sample-template">
      <style>
         ::slotted(.p-text) {
            background-color: lavender;
         }

         h2::slotted(.heading) {
            background: silver;
         }

         ::slotted(#footer-text) {
            background-color: lightsteelblue;
            border: 2px solid black;
         }
      </style>
      <div>
         <h2><slot name="heading">title goes here</slot></h2>
         <slot name="p-text">content goes here</slot>
         <slot name="footer-text">Footer here</slot>
      </div>
   </template>

   <sample-card>
      <span class="heading" slot="heading">::Slotted Example</span>
      <p class="p-text" slot="p-text">Paragraph text</p>
      <p id="footer-text" slot="footer-text">Footer text</p>
   </sample-card>

   <script>
      customElements.define(
         'sample-card',
         class extends HTMLElement {
         constructor() {
         super();

         const template = document.getElementById('sample-template');
         const shadow = this.attachShadow({ mode: 'open' });
         shadow.appendChild(template.content.cloneNode(true));

         const elementStyle = document.createElement('style');
         elementStyle.textContent = `
         div {
         width: 250px;
         border: 5px inset green;
         border-radius: 2px;
         padding: 5px;
         }`;
         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;
         });
         }
      },
      );
   </script>
</body>
</html>

多个伪元素

以下示例演示了多个伪元素（::first-line 和 ::first-letter）的使用。

<html>
<head>
<style>
   p::first-line { text-decoration: underline; }
   p::first-letter { 
      text-transform: lowercase;
      font-size: 2em;
      color: red;
   }
</style>
</head>
<body>
   <p>
      The first line of this paragraph will be underlined and the first letter is lowercase, 2em and red in color, as pseudo-element ::first-line & ::first-letter is applied on p.<br />
      The second line is not underlined.
   </p>
</body>
</html>