css 伪元素

详述: 这篇文章是继 css的伪类与 css 伪类选择器后的 CSS伪元素总结，意在总结连贯提炼为一个系统的前端 CSS 知识体系, 有不足之处望大家指出, 如有想要了解的知识点可以

::first-lette

1. 用于向文本的首字母设置特殊样式

2. "first-letter" 伪元素只能用于块级元素。

3. 代码示例:

     p:first-letter {

         color: #ff0000;

         font-size:xx-large

     }

Snip20200607_39.png

** 2. ::first-line*

1. 用于向文本的首行设置特殊样式。

2. "first-line" 伪元素只能用于块级元素。

3. 代码示例:

       p:first-line {

         color: #ff0000;

         font-variant: small-caps

       }

Snip20200607_40.png

** 3. ::before*

1. :before 和 :after 下特有的 content, 用于在 css 渲染中向元素逻辑上的头部或尾部添加内容。

2. 这些添加不会出现在 DOM 中, 不会改变文档内容, 不可复制, 仅仅是在 css 渲染层加入。

3. 所以不要用: before 或 after 展示有实际意义的内容, 尽量使用它们显示修饰性内容。

4. 代码示例:

       h1:before {

         content: url(/i/w3school_logo_white.gif)

       }

Snip20200607_42.png

** 4. ::after*

1. 代码示例:

       h1:after {

         content: url(/i/w3school_logo_white.gif)

       }

Snip20200607_43.png

完整 html 文档

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    p {

      text-align: center;

      background-color: yellowgreen;

      line-height: 166px;

    }

    */\* p:first-letter {*

      *color: #ff0000;*

      *font-size: 36px;*

    *} \*/*

    */\* p:first-line {*

      *color: blueviolet;*

      *font-variant: small-caps*

    *} \*/*

    */\* p::before {*

      *content: 'before添加内容';*

      *color: crimson;*

    *} \*/*

    p::after {

      content: 'after 添加内容';

      color: crimson;

    }

  </style>

</head>

<body>

  <div>

    <p> ---- p::after{} 也可设置我们的 icon 图片: content: url(/i/w3school_logo_white.gif) <br> 使用方式与 ::before 相同 </p>

  </div>

</body>

</html>