CODEWITHSUNDEEP
htmlcss
Alen
Alen

Reputation: 1291

making a vertical line before text when hovered

I have created a list and when I hover a line should be displayed like this

enter image description here

See when hovered over Mobile & Tablets a vertical line is shown with orange color at the beginning

This is my simple code

ul {
  list-style: none;
}

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

li:hover {
  background-color: white;
}
<ul>
  <li>List</li>
  <li>List</li>
</ul>

Upvotes: 2

Views: 2454

Answers (7)

Niles Turner
Niles Turner

Reputation: 300

You could use a css ::before pseudo-element. See code snippet.

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;
}
<ul>
  <li>List</li>
  <li>List</li>
</ul>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

You have different possibilities to solve this. You can try the following solutions:

solution using 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>

solution using 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>

solution using 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>

Upvotes: 2

hungerstar
hungerstar

Reputation: 21725

Include a border from the beginning and then change it to the color you need.

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>

Upvotes: 1

Pavan Vora
Pavan Vora

Reputation: 1744

What you have to do is just add below CSS to your li:hover field,

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

Upvotes: 1

Manuel Otto
Manuel Otto

Reputation: 6540

This should give your the result as shown in the example:

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;
}
<ul>
  <li>List</li>
  <li>List</li>
</ul>

Upvotes: 4

Aswin Ramesh
Aswin Ramesh

Reputation: 1674

you can give padding and a border for the same

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

Upvotes: 1

Daniel Arthur
Daniel Arthur

Reputation: 456

All you need to do is add a thick orange border to the left side of the li element on hover:

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>

Upvotes: 1

Related Questions