在悬停时在文本之前制作垂直线

Question

我创建了一个列表，当我悬停一行时，应该像这样显示

查看何时悬停在Mobile＆amp;平板电脑的垂直线在开头用橙色显示

这是我的简单代码

＆＃13;

＆＃13;

ul {
  list-style: none;
}

li {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  background-color: grey;
}

li:hover {
  background-color: white;
}

＆＃13;

<ul>
  <li>List</li>
  <li>List</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有不同的可能来解决这个问题。您可以尝试以下解决方案：

解决方案使用box-shadow：

ul {
  list-style:none;
  padding:0;
}
li {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  padding-left:5px;
  background-color: grey;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
}
li:hover {
  background-color: white;
  box-shadow:inset 3px 0px 0px 0px red;
  border-top-color:grey;
  border-bottom-color:grey;
}

<ul>
  <li>List</li>
  <li>List</li>
</ul>

解决方案使用border-left：

ul {
  list-style:none;
  padding:0;
}
li {
  border-left:3px solid transparent;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  padding-left:5px;
  background-color: grey;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
}
li:hover {
  border-left-color:red;
  background-color: white;
  border-top-color:grey;
  border-bottom-color:grey;
}

<ul>
  <li>List</li>
  <li>List</li>
</ul>

解决方案使用linear-gradient：

ul {
  list-style:none;
  padding:0;
}
li {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  padding-left:5px;
  background-color: grey;
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
}
li:hover {
  background:linear-gradient(to right, red 0px, red 3px, transparent 3px);
  background-color: white;
  border-top-color:grey;
  border-bottom-color:grey;
}

<ul>
  <li>List</li>
  <li>List</li>
</ul>

Answer 2

您需要做的就是在悬停时在li元素的左侧添加一个粗橙色边框：

ul {
    list-style:none;
}
li {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    background-color: grey;
}
li:hover {
    background-color: white;
    border-left: 5px solid orange;
}

<ul>
  <li>List</li>
  <li>List</li>
</ul>

Answer 3

从头开始包含边框，然后将其更改为您需要的颜色。

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 5px 0 5px 5px;
  margin-bottom: 5px;
  border: 1px solid transparent;
  border-left-width: 5px;
}

li:hover {
  cursor: pointer;
  background-color: white;
  border-color: lightgray;
  border-left-color: orange;
}

<ul>
  <li>List</li>
  <li>List</li>
</ul>

Answer 4

你可以为同一个

提供填充和边框

li:hover
{
  background-color: white;
  border-left: 5px solid orange;
  padding-left: 5px;
}

Answer 5

这应该给出结果如示例所示：

＆＃13;

＆＃13;

ul {
  list-style: none;
}

li {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  background-color: white;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
  border-left: solid 6px transparent;
}

li:hover {
  background-color: white;
  border-top-color: grey;
  border-bottom-color: grey;
  border-left-color: orange;
}

＆＃13;

<ul>
  <li>List</li>
  <li>List</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 6

您需要做的就是将以下CSS添加到您的li：hover字段，

li:hover{
    border: 1px solid #cbcbcb;
    border-left: 3px solid orange;
    background-color: white;
    color: orange;
}

Answer 7

你可以使用css :: before伪元素。请参阅代码段。

＆＃13;

＆＃13;

ul {
  list-style: none;
}

li {
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  background-color: grey;
}

li:hover::before {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  background-color: orange;
  top: 0;
}

li:hover {
  background-color: white;
}

＆＃13;

<ul>
  <li>List</li>
  <li>List</li>
</ul>

＆＃13;

＆＃13;

＆＃13;