Pure CSS Simple Metro Station Map

By Javier Palmieri

Friday 20th, Nov, 2015 | # # # #

Today we’d like to share some CSS3 experiments with you. The idea is to use some CSS3 selectors as ::after & ::before and transform property in different scenarios. In this post, we’ll give an overview of the general tricks and techniques used to make this demo. The beauty is how width only <ul> <li> <a> html tags you can create a simple Metro Map.

if you have suggestions or ideas about the this demo please contact me @wdrfree

index.html (html structure)

<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;
 
}