CSS伪元素:::after的用法

CSS教程

::after的用法:用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

用HTML制作一个任务列表,h1 ::after伪元素,h3任务列表,ul>li*3

html,body{
font-family:sans-serif;font-size:1.2em;color:#444
}

ul.todo li.checked::after{
content:”“;
}

空白内容块状实现展示背景图片:

ul.todo li.checked::after{
content:””;
display:inline-block;
width:20px;
height:20px;
background-image:url(‘/images/check.png’);
margin-left:10px;
margin-top:0.4rem;
}

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年10月1日

Previous Story

CSS教程

CSS伪元素:::before的用法

::before的用法:创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容,此元素默认为行内元素。

...

Next Story

CSS教程

CSS伪元素:before和after的用法

::before和::after CSS伪元素:生成的伪元素包含在元素格式框内, 因此不能应用在替换元素上, 比如img或br元素,使用:: before和:: after伪元素来创建一些意想不到的效果。

...