将鼠标悬停在项目上时如何在有序列表中的所有文本下划线

Question

我正在使用 scss，当鼠标悬停在 li 项目上时，我需要取消所有文本（数字和文本）的划线

这是一个例子，但数字仍然没有下划线

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;
   }
 }

谢谢

Answer 1

您可以在 <ol> 元素上添加 list-style-position: inside;。 https://www.w3schools.com/css/css_list.asp

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

   li {
     cursor:pointer;

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

 }

这是一个有效的 fiddle。

注意：感谢@Rayees AC 抓住了这个。这种方法在 Mozilla Firefox 浏览器上的行为不同，因为出于某种原因，text-decoration 不适用于 ::markers（又名列表项目符号）。如果您需要支持其他浏览器，请尝试。

Answer 2

请试试这个，

jsfiddle Demo

请将list-style-position:inside;和display:inline-block;添加到<ol>。

同时将 border-bottom 添加到 <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;
   }
 }

工作演示

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>

将鼠标悬停在项目上时如何在有序列表中的所有文本下划线

How to underline all the text in a ordered list when hovering over an item

css

sass

hover