This image shows the problem:
Seethattheelementwiththenumber3whenactivatinghoveralsoactivatestheeffectsonyour::before(thesmallverticallinethatconnectsthecircles),Ibelievethisproblemisexactlyduetoinheritance.
Hereisthecodewiththecodepenexample: link
Is there any way to resolve this? And if possible only with SCSS / CSS.
Thank you in advance;).
According to what was discussed in the question, I ended up reformulating the structure:
I could not find a better way than dynamically adding a <div> element between each <li></li> .
The amount of div's is the amount of li's minus 1, where I'll try it up to the N-1 and so I was adding in the DOM.
Note The addition of a new element was also raised when it was necessary to add new effects to the element that links the other elements.
