css伪元素做什么用的?

元素事实上是HTML中的概念,常常把HTML中的标签称作为元素。那么伪元素是什么呢?从其名称上来说,伪即为假,在实际的DOM中是不存在的,而事实上呢?我们可以借助一些CSS的特性让其模拟成一个元素,对于这样的元素我们称之为伪元素。

在W3C的标准规范中也有独立的规范文档,时到今日,伪元素的最新规范是CSS Pseudo-Elements Module Level 4。在该规范中有我们熟悉的伪元素,比如::first-line::first-letter::selection::placholder::after::before,也有我们不熟悉的::marker::inactive-selection::spelling-error::grammar-error

css伪元素做什么用的?

CSS伪元素是用来添加一些选择器的特殊效果。

CSS伪元素控制的内容和元素是没有差别的,但是它本身只是基于元素的抽象,并不存在于文档中,所以称为伪元素。

常用伪元素:

  • :first-line 伪元素用于向文本的首行设置特殊样式(只能作用于块级元素)

  • :first-letter 伪元素用于向文本的首字母设置特殊样式(只能作用于块级元素)

  • :before 伪元素可以在元素的内容前面插入新内容

  • :after 伪元素可以在元素的内容之后插入新内容

例子1:绘制三角形

通过以下代码可以简单的绘制三角形

1.jpg

2.jpg

可以根据需求将不需要用到的三角形隐藏:border-color:gray transparent transparent transparent

3.jpg

例子2:绘制太极图

基础结构为2个大小不同的div,通过border-radius将div变为圆形,再由:before制作与div不同原色的半圆

4.jpg

5.jpg

6.jpg

绘制左右两边的小圆

7.jpg

8.jpg

9.jpg

例子3:加载效果

利用伪元素与h5动画效果实现动画加载效果

10.jpg

11.jpg

13.jpg

14.jpg

15.jpg

最后添加动画效果

16.jpg

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css伪元素做什么用的?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏