Draw arrow between two flex items

Question

I want the arrow to be inserted between two flex items as they are added(Please run the code). It must be added after the first flex item for every added flex item between them so that they appear connected by the arrow. The arrow must be at the midpoint of box boundaries ( not box centre) connecting them.

 $('#clickMe').click(function() { $('#Demosss').append($('<li class="flex-item">').text('text')) $(this).insertAfter($('[class^="flex-item"]').last()); }); $(document).on('click', '.flex-item' ,function(){ $(this).toggleClass('flexActive') }) 

 .flex-container { padding: 0; margin: 0; list-style: none; -webkit-flex-direction: row; /* Safari */ flex-direction: row; flex-wrap: wrap; } .flex-item { background: green; padding: 5px; width: 100px; height: 150px; margin-top: 10px; margin-right: 15px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; } .flexActive{ width:auto; display:block; flex: 1 1; margin-right:0; } ul li{ display: inline; } .enlarge{ zoom: 350%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="Demosss" class="flex-container"> <!-- add LI here --> </ul> <button id="clickMe">Click Me</button> <div class="enlarge"> <span>&#8674;</span> </div> 

Answer 1

You can use a pseudo element with the arrow as content , and to exclude it from the first element, use :not() in your CSS.

 $('#clickMe').click(function() { $('#Demosss').append($('<li class="flex-item">').text('text')) $(this).insertAfter($('[class^="flex-item"]').last()); }); $(document).on('click', '.flex-item' ,function(){ $(this).toggleClass('flexActive') }) 

 .flex-container { padding: 0; margin: 0; list-style: none; -webkit-flex-direction: row; /* Safari */ flex-direction: row; flex-wrap: wrap; } .flex-item { background: green; padding: 5px; width: 100px; height: 150px; margin-top: 10px; margin-right: 15px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; position: relative; } .flexActive { width: auto; display: block; flex: 1 1; margin-right: 0; } ul li { display: inline; } .flex-item:not(:first-child) { margin-left: .75em; } .flex-item:not(:first-child):before { content: '\\21E2'; color: black; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%); z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="Demosss" class="flex-container"></ul> <button id="clickMe">Click Me</button> 

Answer 2

Remove the horizontal margins between your block elements, and then conditionally append the arrow before each inserted block when you detect that at least one block has already been added.

 var first = true $('#clickMe').click(function() { var demos = $('#Demosss') if (!first) { demos.append('&#8674;') } else first = false demos.append($('<li class="flex-item">').text('text')) $(this).insertAfter($('.flex-item').last()); }); $(document).on('click', '.flex-item', function (){ $(this).toggleClass('flexActive') }) 

 .flex-container { padding: 0; margin: 0; list-style: none; -webkit-flex-direction: row; /* Safari */ flex-direction: row; flex-wrap: wrap; } .flex-item { background: green; padding: 5px; width: 100px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; } .flexActive{ width:auto; display:block; flex: 1 1; margin-right:0; } ul li{ display: inline; } .enlarge{ zoom: 350%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="Demosss" class="flex-container"> <!-- add LI here --> </ul> <button id="clickMe">Click Me</button> <div class="enlarge"> </div> 

Answer 3

Try to something like this.

 $('#clickMe').click(function() { $('#Demosss').append($('<li class="flex-item">').text('text')) $('.enlarge').css('display','none'); $('#Demosss').append($('<div class="enlarge1"><span>&#8674;</span></div>')) $(this).insertAfter($('[class^="flex-item"]').last()); }); $(document).on('click', '.flex-item' ,function(){ $(this).toggleClass('flexActive') }) 

 .flex-container { padding: 0; margin: 0; list-style: none; -webkit-flex-direction: row; /* Safari */ flex-direction: row; flex-wrap: wrap; } .flex-item { background: green; padding: 5px; width: 100px; height: 150px; margin-top: 10px; margin-right: 15px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; display: inline-block; } .flexActive{ width:auto; display:block; flex: 1 1; margin-right:0; } ul li{ display: inline; } .enlarge1{ zoom: 350%; } .enlarge{ zoom: 350%; } 

 <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul id="Demosss" class="flex-container"> <!-- add LI here --> </ul> <button id="clickMe">Click Me</button> <div class="enlarge"><span>&#8674;</span></div> <div class="arrow"> </div>