0.5 border

<!doctype html>

<html lang="en">

<head>

 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

 <meta charset="UTF-8">

 <title>0.5 border</title>

 <style type="text/css">

 *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}

 ul{

  position: relative;

 }

 li{

  height: 60px;

  line-height: 60px;

  padding-left: 10px;

  position: relative;

  font-size: 20px;

 }

 li:after{

  content: "";

  display: block;

  position: absolute;

  left: -50%;

  width: 200%;

  height: 1px;

  background: red;

  -webkit-transform:scale(0.5);

 }

 </style>

</head>

<body>

 <ul>

  <li>list-item1</li>

 </ul>

</body>

</html>

<!doctype html><html lang="en"><head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta charset="UTF-8"> <title>0.5 border</title> <style type="text/css"> *{margin: 0;padding: 0;-webkit-box-sizing:border-box;} ul{  position: relative; } li{  height: 60px;  line-height: 60px;  padding-left: 10px;  position: relative;  font-size: 20px; } li:after{  content: "";  display: block;  position: absolute;  left: -50%;  width: 200%;  height: 1px;  background: red;  -webkit-transform:scale(0.5); } </style></head><body> <ul>  <li>list-item1</li> </ul></body></html>

posted @ 2016-04-12 10:33  小曹ydj  Views(173)  Comments(0)    收藏  举报