css - how to draw an arrow on ::after-CodePudding

I have the following code which draws a line between the bullets using ::after when I click a button.

What I would like is to have an arrow head on the end of the line. How can achieve this?

HTML

<div >
   <div >
       <div >
           <p >Step 1</p>
           <div >1</div>
       </div>
       <div >
           <p >Step 2</p>
           <div >2</div>
       </div>
       <div >
           <p >Step 3</p>
           <div >3</div>
       </div>
   </div>
   <button id="previousBtn" type="button">Previous</button>
   <button id="nextBtn" type="button">Next</button>
   <button id="finishBtn" type="button">Finish</button>
</div>

javascript

const  previousBtn  =  document.getElementById('previousBtn');
const  nextBtn  =  document.getElementById('nextBtn');
const  finishBtn  =  document.getElementById('finishBtn');
const  content  =  document.getElementById('content');
const  bullets  =  [...document.querySelectorAll('.bullet')];

const MAX_STEPS = 8;
let currentStep = 1;

nextBtn.addEventListener('click',  ()  =>  {
    bullets[currentStep  -  1].classList.add('completed');
    currentStep   =  1;
    previousBtn.disabled  =  false;
    if  (currentStep  ===  MAX_STEPS)  {
        nextBtn.disabled  =  true;
        finishBtn.disabled  =  false;
    }
});


previousBtn.addEventListener('click',  ()  =>  {
    bullets[currentStep  -  2].classList.remove('completed');
    currentStep  -=  1;
    nextBtn.disabled  =  false;
    finishBtn.disabled  =  true;
    if  (currentStep  ===  1)  {
        previousBtn.disabled  =  true;
    }
});

finishBtn.addEventListener('click',  ()  =>  {
    location.reload();
});

CSS

.stepper-bar  {
    display:  flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.step  {
    flex: 1;
    text-align:  center;
}

.step-text  {
margin-bottom:  10px;
color:  #28a745;
}


.bullet {
    border: 1px solid #28a745;
    height: var(--circle-size);
    width: var(--circle-size);
    border-radius: 100%;
    color: #28a745;
    display: inline-block;
    position: relative;
    transition: background-color 500ms;
    line-height: var(--circle-size);
}


.bullet.completed  {
    color:  white;
    background-color:  #28a745;
}


.bullet.completed::after {
    content: '';
    display: flex;
    position: relative;
    left: calc(50%   var(--circle-size));
    bottom: calc(var(--circle-size) / 2);
    height: 2px;
    width: calc(100%   var(--circle-size));
    background-color: #28a745;
}

The above code gives me the following (after clicking the next button):

What I would like is this:

I tried using

content: '\2192';

But I just get this:

Any help appreciated.

CodePudding user response：

I would say the most straightforward solution is either using clip-path or an svg to handle this scenario.

You can make the div that represents your line arrow rectilinear and apply a clip path like so:

div{
  width: 100px;
  height: 50px;
  background-color: green;
  clip-path: polygon(0 45%, 90% 45%, 90% 35%, 100% 50%, 90% 65%, 90% 55%, 0 55%);
 }

<div>
</div>

So, in your code it might look roughly like this:

.bullet.completed::after {
 content: '';
 display: flex;
 position: relative;
 left: calc(50%   var(--circle-size));
 bottom: calc(var(--circle-size) / 2);
 height: 20px;
 width: calc(100%   var(--circle-size));
 background-color: #28a745;
 clip-path: polygon(0 45%, 90% 45%, 90% 35%, 100% 50%, 90% 65%, 90% 55%, 0 55%);
}