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