0

I'm using scss and I need to undeline all the text (number and text) when hovering over the li item

this is an example but the number still not underlined

https://jsfiddle.net/viking_123/9hgjyo05/1/

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

SCSS

 ol li {
   cursor:pointer;
   &:hover {
     text-decoration: underline;
   }
 }

Thanks

Victor
  • 37
  • 1
  • 9

2 Answers2

1

Please try this instead,

jsfiddle Demo

Please add list-style-position:inside; and display:inline-block; to <ol>.

Also add border-bottom to <li>

SCSS

ol{
   list-style-position:inside;
   display:inline-block;
 }
ol li {
   cursor:pointer;
   border-bottom:2px solid transparent;
   &:hover {
     border-bottom:2px solid #111;
   }
 }

Working Demo

ol{
   list-style-position:inside;
   display:inline-block;
}

ol li {
   cursor:pointer;
   border-bottom:2px solid transparent;
   float: left;
   clear: left;
}

ol li:hover {
   border-bottom:2px solid #111;
 }
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
Rayees AC
  • 4,426
  • 3
  • 8
  • 31
0

You can add list-style-position: inside; on the <ol> element. https://www.w3schools.com/css/css_list.asp

 ol {
   /* Add this to style*/
   list-style-position: inside;

   li {
     cursor:pointer;

     &:hover {
       text-decoration: underline;
     }
   }

 }

enter image description here

Here is a working fiddle.

NOTE: Thanks to @Rayees AC for catching this. This approach behaves differently on Mozilla Firefox browsers because for some reason, text-decoration does not apply on ::markers (aka the list bullets). If you need to support other browsers, try @Rayees AC's approach instead.

Blackraspberryyy
  • 2,016
  • 2
  • 11
  • 22
  • isn't working properly? can you add a demo in **jsfiddle** or **codepen** – Rayees AC Sep 03 '20 at 11:27
  • @RayeesAC, sorry I stand corrected. It should also work on
      element too. Here's a fiddle. https://jsfiddle.net/blackraspberryyyy/87r6f03a/10/
     – Blackraspberryyy Sep 03 '20 at 11:33
  • Ok, but the number not included in underline. read question ' underline all the text (number and text) when hovering over the li item '. he want the underline including the number and text also. – Rayees AC Sep 03 '20 at 11:38
  • Yup, the number and text is both underlined on hover. Have you checked my fiddle? I'll also attach an image so you can see the output. – Blackraspberryyy Sep 03 '20 at 11:41
  • 1
    not working in firefox browser. can you check man.. – Rayees AC Sep 03 '20 at 12:07
  • You're right. For some reason, `text-decoration` does not apply on `::markers` (the list bullets) on Mozilla Firefox browsers. I'll edit my answer. Thanks! – Blackraspberryyy Sep 03 '20 at 12:17