1.first-line   元素首行设置特殊样式。

效果演示：

<div class="top">
      <p>可以使用 "first-line" 伪元素向文本的首行设置特殊样式。<br> 换行内容 </p>
    </div>

.top p::first-line {
        color: red;
      }

 2.first-letter   向文本的首字母设置特殊样式

 效果演示：

<div class="top">
      <p>可以使用 "first-letter" 伪元素向文本的首字符设置特殊样式。 </p>
    </div>

.top p::first-letter {
        color: red;
      }

 3.before    可以在元素的内容前面插入新内容

 效果演示：

<div class="top">

      <p>可以使用 "before" 伪元素的内容前面插入新内容式。 </p>

    </div>

 .top p::before {
        content: '测试内容 ';
      }

 

 4.after 可以在元素的内容最后面插入新内容

 效果演示：

 <div class="top">
      <p>可以使用 "after" 伪元素的内容后面插入新内容式。 </p>
    </div>

   .top p::after {
        content: '测试内容 ';
      }