CSS |伪元素-yiteyi-C++库

CSS伪元素是添加到选择器中的关键字，用于设置选定元素的特定部分的样式。例如，设置元素的第一个字母或第一行的样式，

null

在元素内容之前或之后插入内容。所有这些都可以使用CSS中的伪元素来完成。

笔记与伪元素相比，伪类可以用于根据元素的状态设置元素的样式。

语法：

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

CSS中有许多伪元素，但最常用的伪元素如下：

：：第一行伪元素 将样式应用于块级元素的第一行。请注意，第一行的长度取决于许多因素，包括元素的宽度、文档的宽度和文本的字体大小。请注意，只有少数属性应用于第一行伪元素，如字体属性、颜色属性、背景属性、单词间距、字母间距、文本装饰、垂直对齐、文本转换、行距、清除等。

例子：

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     lang                                     =                                     "en"                                     >                       
                         <                                     head                                     >                       
                                                 <                                     title                                     >first-line Demo</                                     title                                     >                       
                                                 <                                     style                                     >                       
                                                 body{                       
                                                 background-color:whitesmoke;                       
                                                 color:green;                       
                                                 font-size: large;                       
                                                 text-align: center;                       
                                                 }                       
                                   
                                                 p::first-line{                       
                                                 color:Red;                       
                                                 font-weight: bold;                       
                                                 }                       
                                                 </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                                                 <                                     h1                                     >Geeks For Geeks</                                     h1                                     >                       
                                                 <                                     h2                                     >::first-line element</                                     h2                                     >                       
                                   
           
                         <                                     p                                     >This is a paragraph using first-line pseudo-element                       
                                                 to style first line of the paragraph.Content in the                       
                                                 first line turns red and becomes bold.</                                     p                                     >                       
           
           
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出：

图片[1]-CSS |伪元素-yiteyi-C++库

：：第一个字母伪元素 将样式应用于块级元素第一行的第一个字母，但仅当前面没有其他内容（如图像或内联表）时。请注意，只有少数属性应用于第一行伪元素，如字体属性、颜色属性、背景属性、单词间距、字母间距、文本装饰、垂直对齐、文本转换、行距、清除等。

例子：

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     lang                                     =                                     "en"                                     >                       
                         <                                     head                                     >                       
                                                 <                                     title                                     >first-letter Demo</                                     title                                     >                       
                                                 <                                     style                                     >                       
                                                 body{                       
                                                 background-color:whitesmoke;                       
                                                 color:green;                       
                                                 font-size: large;                       
                                                 text-align: center;                       
                                                 }                       
                                                 p::first-letter{                       
                                                 color:Red;                       
                                                 font-size: 30px;                       
                                                 font-weight: bold;                       
                                                 }                       
                                                 </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                                                 <                                     h1                                     >Geeks For Geeks</                                     h1                                     >                       
                                                 <                                     h2                                     >::first-letter element</                                     h2                                     >                       
                                   
           
                         <                                     p                                     >This is a paragraph using first-letter pseudo-element                       
                                                 to style first letter of the paragraph.first-letter element                       
                                                 turned the first letter of this paragraph to red                       
                                                 and made it bold.</                                     p                                     >                       
           
           
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出：

图片[2]-CSS |伪元素-yiteyi-C++库

:: 伪元素之前 创建作为选定元素的第一个子元素的伪元素。它通常用于向具有content属性的元素添加装饰性内容。默认情况下，它是内联的。

例子：

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     lang                                     =                                     "en"                                     >                       
                         <                                     head                                     >                       
                                                 <                                     title                                     >before Demo</                                     title                                     >                       
                                                 <                                     style                                     >                       
                                                 body{                       
                                                 background-color:whitesmoke;                       
                                                 color:green;                       
                                                 font-size: large;                       
                                                 text-align: center;                       
                                                 }                       
                                                 p::before{                       
                                                 content: '"';                       
                                                 color: red;                       
                                                 font-size: 30px;                       
                                                 }                       
                                                 </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                                                 <                                     h1                                     >Geeks For Geeks</                                     h1                                     >                       
                                                 <                                     h2                                     >::before element</                                     h2                                     >                       
                                   
           
                         <                                     p                                     >This is a paragraph to which we added red color quotation marks                       
                                                 using ::before element.</                                     p                                     >                       
           
           
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出：

图片[3]-CSS |伪元素-yiteyi-C++库

：：在伪元素之后 创建作为选定元素的最后一个子元素的伪元素。它通常用于向具有content属性的元素添加装饰性内容。默认情况下，它是内联的。

例子：

HTML

                           <!DOCTYPE html>                         
                           <                                        html                                        lang                                        =                                        "en"                                        >                         
                           <                                        head                                        >                         
                                                     <                                        title                                        >after Demo</                                        title                                        >                         
                                                     <                                        style                                        >                         
                                                     body{                         
                                                     background-color:whitesmoke;                         
                                                     color:green;                         
                                                     font-size: large;                         
                                                     text-align: center;                         
                                                     }                         
                                                     p::after{                         
                                                     content: '"';                         
                                                     color: red;                         
                                                     font-size: 30px;                         
                                                     }                         
                                                     </                                        style                                        >                         
                           </                                        head                                        >                         
                           <                                        body                                        >                         
                                                     <                                        h1                                        >Geeks For Geeks</                                        h1                                        >                         
                                                     <                                        h2                                        >::after element</                                        h2                                        >                         
                                      
            
                           <                                        p                                        >This is a paragraph to which we added red color quotation marks                         
                                                     using ::after element.</                                        p                                        >                         
            
            
                           </                                        body                                        >                         
                           </                                        html                                        >                         

输出：

图片[4]-CSS |伪元素-yiteyi-C++库

：：标记伪元素 选择列表项的标记框，该框通常包含项目符号或数字。它适用于设置为display:list项的任何元素或伪元素，例如
和

元素。

例子：

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     lang                                     =                                     "en"                                     >                       
                         <                                     head                                     >                       
                                                 <                                     title                                     >marker Demo</                                     title                                     >                       
                                                 <                                     style                                     >                       
                                                 body{                       
                                                 background-color: whitesmoke;                       
                                                 color: green;                       
                                                 text-align: center;                       
                                                 }                       
                                                 ul{                       
                                                 width: 40px;                       
                                                 }                       
                                                 ul li::marker{                       
                                                 color: red;                       
                                                 font-size: 30px;                       
                                                 }                       
                                                 </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                                                 <                                     h1                                     >Geeks For Geeks</                                     h1                                     >                       
                                                 <                                     h2                                     >::marker element</                                     h2                                     >                       
                                                 <                                     ul                                     >                       
                                                 <                                     li                                     >HTML</                                     li                                     >                       
                                                 <                                     li                                     >CSS</                                     li                                     >                       
                                                 <                                     li                                     >JavaScript</                                     li                                     >                       
                                                 </                                     ul                                     >                       
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出：

图片[5]-CSS |伪元素-yiteyi-C++库

：：选择伪元素 将样式应用于用户高亮显示的文档部分，例如在文本上单击并拖动鼠标。

例子：

HTML

                         <!DOCTYPE html>                       
                         <                                     html                                     lang                                     =                                     "en"                                     >                       
                         <                                     head                                     >                       
                                                 <                                     title                                     >selection Demo</                                     title                                     >                       
                                                 <                                     style                                     >                       
                                                 body{                       
                                                 background-color: whitesmoke;                       
                                                 color: green;                       
                                                 text-align: center;                       
                                                 }                       
                                                 p::selection{                       
                                                 color: red;                       
                                                 background-color: green;                       
                                                 font-size: 30px;                       
                                                 }                       
                                                 ::selection{                       
                                                 color: green;                       
                                                 background-color: red;                       
                                                 font-size: 30px;                       
                                                 }                       
                                                 </                                     style                                     >                       
                         </                                     head                                     >                       
                         <                                     body                                     >                       
                                                 <                                     h1                                     >Geeks For Geeks</                                     h1                                     >                       
                                                 <                                     h2                                     >::selection element</                                     h2                                     >                       
                                   
           
                         <                                     p                                     >Content in this paragraph turns red with                       
                                                 green background on selection.</                                     p                                     >                       
           
           
                                                 <                                     span                                     >As this is not a paragraph, you can notice red                       
                                                 background and green text on selection.</                                     span                                     >                       
                         </                                     body                                     >                       
                         </                                     html                                     >                       

输出：

图片[6]-CSS |伪元素-yiteyi-C++库

文章版权归作者所有，未经允许请勿转载。

THE END