需要使用CSS和HTML在列表元素的左侧添加行

发布于 2025-02-09 10:26:18 字数 1341 浏览 1 评论 0原文

我想在鼠标悬停时在列表元素的左侧添加曲线。问题是当我悬停列表时，列表行变为多行。以下是我的代码。

<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 class="table-of-contents">
<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.sstatic.net/c1Ur8.png
  [2]: https://i.sstatic.net/mtppf.png

原文

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 class="table-of-contents">
<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.sstatic.net/c1Ur8.png
  [2]: https://i.sstatic.net/mtppf.png

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眸 2025-02-16 10:26:18

问题是因为li宽度设置为徘徊的5px。因此，多线被分解为许多线路。

要解决该问题，您可以考虑使用Border-Left

.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 class="table-of-contents">
<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>

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 class="table-of-contents">
<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>

回复收藏 0 原文

迷你仙 2025-02-16 10:26:18

为了控制标记，您可以将它们完全删除（列表式式型号），并在LI元素上的伪元素之前替换它们。

在未覆盖的状态下，该片段将Unicode填充的圆圈作为伪元素中的内容。

在悬停的状态下，它去除并用弯曲线代替。对于使用半圆边框绘制的演示，但是如果足够的话，您可以选择一个相关的Unicode字符，或绘制所需类型的曲线类型的背景，或调整边框的半径。您对伪元素的样式具有很大的灵活性。

在未覆盖的元素上删除标准圆盘标记的原因是，无论字体大小的选择，我们都可以确保将悬停和未覆盖的标记的定位保持相同。

<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 class="table-of-contents">
    <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>

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 class="table-of-contents">
    <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>

回复收藏 0 原文

~没有更多了~