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

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.

<html>
<style>
.table-of-contents{
  background-color:#F0FAFA;
  padding:48px;
  border-radius: 48px;
}
.table-of-contents li:hover{
    width:5px;
    height:calc(100%-20px);
    background-color:#785aff;
    border-radius:5px;
    list-style: none;
    text-indent:25px;
}
</style>
<body>
<div >
<h2>Table of Contents</h2>
<ul style="margin-left:30px">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">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 </a></li>
</ul>
</div>
</body>
</html>

**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

CodePudding user response：

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 */
}

<html>
<style>

</style>
<body>
<div >
<h2>Table of Contents</h2>
<ul style="margin-left:30px">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">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 </a></li>
</ul>
</div>
</body>
</html>

CodePudding user response：

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.

<html>
<style>
  .table-of-contents {
    background-color: #F0FAFA;
    padding: 48px;
    border-radius: 48px;
    position: relative;
  }
  
  .table-of-contents li {
    position: relative;
    list-style: none;
  }
  
  .table-of-contents li::before {
    content: '\25CF';
    position: absolute;
    margin: 0;
    padding: 0;
    margin-left: -1em;
    height: 1em;
    width: 1em;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .table-of-contents li:hover::before {
    content: '';
    border: #785aff 3px solid;
    border-radius: 50%;
    border-color: transparent transparent #785aff #785aff;
    transform: rotate(45deg);
    height: 1em;
  }
</style>

<body>
  <div >
    <h2>Table of Contents</h2>
    <ul style="margin-left:30px">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">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 </a></li>
    </ul>
  </div>
</body>

</html>