今天我们想和大家分享一些CSS3实验。 这个想法是使用一些CSS3选择器作为:: after和:: before和transform属性在不同的场景。 在本文中，我们将概述用于进行此演示的一般技巧和技巧。 美丽是如何宽度只有

• html标签，你可以创建一个简单的地铁地图。

HTML

<ul>
 <li><a href="">J. M. de Rosas</a></li>
 <li><a href="">Echeverria</a></li>
 <li><a href="">De los Incas</a></li>
 <li><a href="">Tronador</a></li>
 <li><a href="">F. Lacroze</a></li>
 <li><a href="">Dorrego</a></li>
 <li><a href="">Malabia</a></li>
 <li><a href="">AngelGallardo</a></li>
 <li><a href="">Medrano</a></li>
 <li><a href="">Carlos Gardel</a></li>
 <li><a href="">Pueyrredón</a></li>
 <li><a href="">Pasteur</a></li>
 <li><a href="">Callao</a></li>
 <li><a href="">Uruguay</a></li>
 <li><a href="">9 de Julio</a></li>
 <li><a href="">Florida</a></li>
 <li><a href="">L.N. Alem</a></li>
</ul>

main.css

代码
body{

 position:relative;
 background: transparent url("background.jpg") no-repeat scroll center top / cover;
 overflow: hidden;
}

li a{
 position:absolute;
 top:-60px;
 color:#fff;
 /* Safari */
 -webkit-transform: rotate(-45deg);
 
 /* Firefox */
 -moz-transform: rotate(-45deg);
 
 /* IE */
 -ms-transform: rotate(-45deg);
 
 /* Opera */
 -o-transform: rotate(-45deg);
 
 /* Internet Explorer */
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 width:100px;
 text-decoration:none;
 
}

ul{
 position:absolute;
 top: 50%;
 transform: translate(0%, -50%);;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 width:100%;
 padding-left:0px;


 
}

li:hover{
 background-color:#fff;
}

li {
 position:relative;
 text-decoration:none;
 list-style-type:none;
 width:20px;
 height:20px;
 border:5px solid #900;
 border-radius: 100%;
 display:inline-block;
 margin-right:20px;

}

li::before {
 content: "";
 display: block;
 width:25px;
 border-top:5px solid #900;
 border-bottom:5px solid #900;
 height:5px;
 margin-left:23px;
 margin-top:3px;
} 

li:last-child::before {
 display:none;
 
}

li:last-child {
 margin-right:0;
 
}

-END-