Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!


Childs e Connectors

Recommended Posts


Boas Pessoal,

Eu tenho o seguinte código:

* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20px; position: relative;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
vertical-align: middle;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;

/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 2px solid #ccc;
width: 50%; height: 20px;
.tree li::after{
right: auto; left: 50%;
border-left: 2px solid #ccc;
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 2px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;

Que basicamente faz isto: http://i.imgur.com/ByrwdCA.jpg

Mas queria ver se o modificava de maneira a dar me isto: http://i.imgur.com/EmaEwv1.jpg

Alguém sabe como fazer e que me possa ajudar com algum código que tenha ou dar umas indicações de sites/tutoriais?

Agradecimentos, Ricardo Nogueira :cheesygrin:

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.