将HTML链接保留在与：：before伪元素相同的行中的列表中

我使用：：before伪元素将列表的公共光盘替换为一个符号。目前一切正常：

CSS代码（示例1） HTML（示例1） 但是，链接不再保持在同一行中，请参见：

遗漏了什么/出了什么问题？当将

display:block

与默认列表样式（不带伪元素）结合使用时，一切正常（即：链接显示为block元素；列表的链接和光盘符号仍在同一行）：

CSS代码（示例2-标准）

---

请参阅：

将这两个属性/值添加到

LIA

选择器：

display: inline-block;
width: 100%;

• display:inline

  是

  的默认设置。块元素像金属一样不屈服
  
  

---

• display:block

  使元素占据整个宽度。这就是为什么它要突破新的界限。究竟为什么需要使用该属性？实际上，我不需要

  display:block

  。这只是因为我不想强迫用户精确点击列表中的链接。只需点击线路就更舒适了。在公共列表中使用

  display:block

  ，可以实现这一功能。但它不适用于psudo元素。下面的答案解决了我的问题。非常感谢。太好了，非常感谢！我已经尝试了

  显示：内联块

  ，但是没有

  宽度：100%

  。这就是诀窍。优秀，快乐的编码！啊，有一个小陷阱：如果链接由几个单词组成，并且链接显示在两行中（例如，由于屏幕很小），那么图标将显示在第二行的基线处（参见此处：）。实际上，图标仍应显示在第一行的基线上<代码>垂直对齐：顶部是一个解决方法，但它相当难看。你还有别的想法吗？与其担心那些看起来臃肿的链接，不如将它们保持为一行。如果您确实需要有多行文本，请使用

  文本溢出：省略号

  以便文本被

  …

  截断。然后给链接一个标题属性和全文，这样当用户将鼠标悬停在链接上时，整个文本就会显示出来。请参阅更新的答案。

  <ul>
    <li><a href="https://stackoverflow.com/">Stackoverflow</a></li>
    <li><a href="https://jsfiddle.net">JsFiddle</a></li>
  </ul>
  

  li a {
    display: block;
    border: solid 1px red;
  }
  

  ul {
    /* default: list-style: disc; */
  }
  
  li { 
    background-color: yellow;
    margin: 0.25rem;
  }
  
  li a {
    display: block;
    border: solid 1px red;
  }
  

  display: inline-block;
  width: 100%;