A-A+

before 和after应用

2016年02月01日 htmlcss 暂无评论 阅读 60 次

before 和after应用:

 

before_after

 

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{padding:0;margin:0}
 body{font-size:12px}
 span{width:40px;height:40px;border-radius: 20px;background: #0a428d;display: block}
 #wrap{width:300px;margin:100px auto 40px;height:300px;position: relative}
 span::before{
 content:"";
 width:60px;
 height:60px;
 border:1px solid #0a428d;
 position: absolute;
 left:-10px;
 top:-10px;
 border-radius: 30px;
 }
 span::after{
 content:"";
 width:4px;
 height:40px;;
 background: #000000;
 position: absolute;
 left:30px;
 top:50px;
 }
 </style>
</head>
<body>
<div id="wrap">
 <span></span>
</div>

</body>
</html>

 

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录