CSS 伪元素 - 易学教程，面试笔记经验！

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

概述

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

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

语法

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

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

伪元素	描述
::after	添加一个伪元素，它是所选元素的最后一个子元素。
::backdrop	在根据视口大小选择元素。
::before	添加一个伪元素，它是所选元素的第一个子元素。
::cue	用于设置带有视频文本轨道的媒体中的字幕和提示的样式。
::first-letter	将样式应用于块级元素第一行的第一个字母。
::first-line	将样式应用于块级元素的第一行。
::file-selector-button	表示 <input> 的按钮type="file"的按钮.
::marker	选择列表项的标记框。
::part()	表示影子树中具有匹配部分属性的元素。
::placeholder	表示 <input> 或 <textarea> 元素中的占位符文本。
::selection	将样式应用于文档的选定部分（通过在文本上单击并拖动鼠标来选择）。
::slotted()	表示已放入 HTML 模板内插槽中的元素。

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

CSS ::after 伪元素

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

<html>
<head>
<style>
   p:after {
      content: url(/css/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>用于创建背景的伪元素背景</p>
         <button onclick="openDialog()">点击打开对话框</button>
         <dialog>
            <p>查看背景</p>
            <button onclick="closeDialog()">关闭</button>
         </dialog>  
      </div>
      <script>
         var dialog = document.querySelector('dialog');
         function openDialog() {  
         dialog.showModal();
         }
         function closeDialog() {  
         dialog.close();
         }
      </script>
</body>
</html>

CSS ::before 伪元素

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

<html>
<head>
<style>
   p:before {
      content: url(/css/images/smiley.png)
   }
</style>
</head>
<body>
   <p> 第一行.</p>
   <p> 第二行.</p>
   <p> 第三行.</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="/css/oceans.mp4">
        <track default kind="captions" srclang="en" src="cue-sample.vtt" />
    </video>    
</body>
</html>

CSS ::first-letter 伪元素

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

<html>
<head>
<style>
   p::first-letter { 
      text-transform: lowercase;
      font-size: 2em;
      color: red;
   }
</style>
</head>
<body>
   <p>
           yxjc123.com 该段落的第一行将带有下划线，并且第一个字母为小写，2em，颜色为红色，因为 p 上应用了伪元素 ::first-line & ::first-letter。<br />
       yxjc 第二行没有下划线。
   </p>
</body>
</html>

CSS ::first-line 伪元素

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

<html>
<head>
<style>
   p::first-line { 
      text-transform: lowercase;
      font-size: 2em;
      color: red;
   }
</style>
</head>
<body>
   <p>
           yxjc123.com 该段落的第一行将带有下划线，并且第一个字母为小写，2em，颜色为红色，因为 p 上应用了伪元素 ::first-line & ::first-letter。<br />
       yxjc 第二行没有下划线。
   </p>
</body>
</html>

CSS ::file-selector-button 伪元素

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

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

    input::file-selector-button {
        background-image:url(/css/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>选择文件</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('/css/images/smiley.png')
      }
      body {
         line-height: 1.4;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
</style>
</head>
<body>
      <h2>编号列表</h2>
      <ol>
         <li>One</li>
         <li>Two</li>
         <li>Three</li>
      </ol>
      <h2>项目符号列表</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>该段落正常渲染，没有任何样式。</p>
      <template id="new-widget">
         <div part="widget">
         <p>该段落呈现为主段落的一部分，因此此处应用 ::part() 伪元素。</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 伪元素

以下示例演示了 ::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 伪元素

以下示例演示了 ::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>
           yxjc123.com 该段落的第一行将带有下划线，并且第一个字母为小写，2em，颜色为红色，因为 p 上应用了伪元素 ::first-line & ::first-letter。<br />
       yxjc 第二行没有下划线。

   </p>
</body>
</html>