Need to add Line in left side of List element using css and html

Question

I want to add a curved line in left side of list element while mouse hover. The problem is when I hover the list the list line become multiple line. Below is my code.





Table of Contents

    Link 1
    Link 2
    Link 3
    This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url 





**Its showing Like below**

[![enter image description here][1]][1]


**But I Need Like when hover the list element** 

[![enter image description here][2]][2]


  [1]: https://i.stack.imgur.com/c1Ur8.png
  [2]: https://i.stack.imgur.com/mtppf.png

user_9166143 · Answer

The issue is because li width is set to 5px on hover. Thus the multi line is broken into many lines.

To address the issue, you can consider using border-left instead

.table-of-contents{
  background-color:#F0FAFA;
  padding:48px;
  border-radius: 48px;
}
.table-of-contents li:hover{
    /* width:5px; */
    border-left: 5px solid #785aff;
    padding-left: 25px;
    height:calc(100%-20px);
    border-radius:5px;
    list-style: none;
    margin-left: -15px; /* negative margin to shift li to left */
}





Table of Contents

    Link 1
    Link 2
    Link 3
    This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url

user_10867454 · Answer

To get control of the markers you can remove them altogether (list-style-type to none) and replace them with before pseudo elements on the li elements.

In the unhovered state this snippet puts the Unicode filled circle as content in the pseudo element.

In the hovered state it removes that and replaces it with a curved line. For this demo that is drawn using a half-circle border but you could choose a relevant Unicode character if that sufficed, or draw a background of the required type of curve, or adjust the radius of the border. You have a lot of flexibility on how you style the pseudo element.

The reason for removing the standard disc marker on the unhovered elements is so that we can be sure of getting the positioning of the hovered and unhovered markers the same whatever the choice of font size etc.





  
    Table of Contents
    
      Link 1
      Link 2
      Link 3
      This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url This is a multiline url

Need to add Line in left side of List element using css and html

2 Answers