Skip to content

Latest commit

 

History

History
44 lines (23 loc) · 1.7 KB

demo.md

File metadata and controls

44 lines (23 loc) · 1.7 KB

使用伪类的demo

不需要向页面添加html元素,使用伪元素,通过样式实现loading

可实现跳转的元素(如:a, button)在请求服务器内容时,由于延时导致请求的内容无法到达客户端,往往需要添加一个 loading 的模块作为提示,这样往往需要向页面添加内元素,利用伪元素也可以实现这样的效果。

demo

*child, *type

*child, *type 这两大类元素是常用的伪类,下面是一个可视化的工具,可以更好的认识这两类伪类。

可视化工具

::marker 定制列表项标记块的效果

除了使用元素li,dt, dd这样的列表项,还可以通过 display: list-item; counter-reset:*; counter-increament:*;自定义列表项的标记。由于::marker的浏览器支持不好,可以使用 ::before 来代替。

demo

开关状态(非默认的input(type为radio、checkbox)样式)(::before, ::after)

demo

下拉菜单的指示按钮(::after)

demo

dialog (::backdrop)

demo

浮动的label (:focus/:not/::placeholder/:placeholder-shown)

demo

多行文本的省略,使用伪元素 (::after) ,末尾的淡出效果

demo

多行文本的省略,使用伪元素 (::after) ,末尾的淡出效果