css中 :before ,:after 用法合集01(时间线）

css 利用 :before 实现时间线先上页面效果：

页面代码：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
width:500px;height:auto;
overflow: hidden;
margin:100px auto;
list-style: none;
line-height: 24px;
}
li{
position:relative;
width:100%;height:auto;
overflow: hidden;
padding-left:200px;
}
li:before{
content: '';
position:absolute;
left:120px;
width:1px;height:100%;
background: #ccc;
}
.timer{
position:absolute;
display: inline-block;
width:100px;height:40px;
left:0;
font-style: normal;
}
.icon{
position: absolute;
left:108px;
display: block;
width:24px;height:24px;
background:#fff;
}
.icon em{
display:block;
width:12px;height:12px;
margin:5px auto;
border:1px solid #4e92df;
border-radius: 50%;
}
p{
margin: 0 0 10px 0;
width:300px;
}
</style>
</head>
<body>
<ul id="time-line">
<li>
2017/11/30

也许生命只是一场无畏的坚持罢了也许生命只是一场无畏的坚持罢了也许生命只是一场无畏的坚持罢了也许生命只是一场无畏的坚持罢了
</li>
<li>
2017/11/30

《大圣传》断更了6个多月了《大圣传》断更了6个多月了《大圣传》断更了6个多月了《大圣传》断更了6个多月了《大圣传》断更了6个多月了《大圣传》断更了6个多月了
</li>
<li>
2017/11/30

《大圣传》断更了6个多月了《大圣传》断更了6个多月了《大圣传》断更了6个多月了也许生命只是一场无畏的坚持罢了
</li>
</ul>
</body>
</html>

css中 :before ,:after 用法合集01(时间线）

相关推荐