文章关键字 ‘::before’

CSS ::marker伪元素简介

2021年02月16日,星期二

标记列表项目符号

::marker是CSS中新出的一种伪元素,用来匹配列表项中的marker box,可以改变项目符号的颜色字体等,甚至改变项目符号内容,填补了CSS以前这块的能力空白。

阅读全文…

常见的CSS图形绘制合集

2019年01月14日,星期一

CSS图形绘制头图

展示40多个常见的纯CSS绘制图形,效果实时,含源代码,想要什么效果直接复制粘贴就好了。就算项目用不到,看看别人代码怎么写的也有助于提高CSS的基本功。

阅读全文…

小tips: 纯CSS显示JS/HTML等源代码行数

2018年02月1日,星期四

如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。

阅读全文…

before(),after(),prepend(),append()等新DOM方法简介

2017年09月28日,星期四

接下来要介绍这些新增的DOM API方法,都比较新,其设计目的是可以像jQuery那样,使用非常简单的api,便利的操作dom元素。

这些api包括:before()after()replaceWith()append()prepend()……

阅读全文…

CSS content换行实现字符点点点loading效果

2016年11月13日,星期日

CSS content字符生成配合CSS3 animation可以各类字符loading效果实现,一起过来看看眼界,学习学习新的实现思路吧~~

阅读全文…

深入CSS ::first-letter伪元素及其实例等

2016年09月30日,星期五

首先,::first-letter本身兼容性非常好,然而,细细体味,会发现,虽然::first-letter兼容性很好,浏览器很早就支持,但是我们实际项目用得并不多,那是因为,我们可以通过嵌套span标签的方式,实现更为广泛更灵活的样式控制。

但是,实际开发场景千千万,总会遇到HTML结构不能改动,或者改动成本很高的的情况,此时::first-letter等就非常有用,而且多半扮演英雄或者救星的角色……

阅读全文…

CSS之before, after伪元素特性表现两则

2015年04月19日,星期日

伪元素之所以称之为“伪元素”一定是有其原因的,本文就举两个特征例子,展示下伪元素跟普通元素,到底有哪些不一样的地方。

依然,有Demo、有截图,有源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS counter计数器(content目录序号自动递增)详解

2014年08月26日,星期二

CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到,不过当时是作为其中一员介绍。就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员。很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象。

然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相。今天,就大肆笔墨,好好地全面地介绍了下CSS计数器,确实有很多知识点,确实有很多不太好理解的地方,确实有很多会踩坑的地方,果然深不可测。不过,本文有着详实的文字,丰富的截图,完全的demo,必要的源代码展示。相信本文的内容会对你的学习有所帮助的!

阅读全文…

first-line伪类实现兼容IE6/IE7的单标签多背景效果

2013年07月5日,星期五

background+filter滤镜可以实现低版本IE浏览器下的多背景效果,::first-line伪元素也是可以实现的,本文就将介绍这种技巧。有表格数据、有源代码展示,有demo页面,有效果截图,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍

2013年05月29日,星期三


摘要,摘个鬼啊,本来只想来个短篇的,该死的越写越多,这个点了,还有鬼心情写摘要啊。总之,是处理IE10+浏览器非常不错的一篇文章,demo啊,截图啊,源代码显然很多的啦。还有大量关于伪类伪元素的小技巧小知识等……就这样,我先撤了~~~

阅读全文…