css的常见伪元素使用

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: '测试内容 ';}