create arrow between two divs code example
Example: connect two divs with arrow
ul {
display: flex;
list-style: none;
}
li {
padding: 10px 25px;
border: 1px solid black;
margin: 0 25px;
position: relative;
}
li:not(:last-child):after {
content: '';
height: 1px;
background: black;
width: 50px;
position: absolute;
right: -50px;
top: 50%;
}
li:not(:last-child):before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 50%;
border-style: solid;
border-width: 7px 0 7px 20px;
border-color: transparent transparent transparent black;
right: -50px;
transform: translateY(-50%);
}