将 HTML-link 保持在与 ::before 伪元素同一行的列表中

Question

我已经使用 ::before 伪元素将列表的普通圆盘替换为 FontAwesome 符号。到目前为止一切正常：

CSS-代码（例1）

ul {
  list-style: none;
}

ul li::before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  margin-left: -3rem;
  padding: 1rem;
}

li { 
  background-color: yellow;
  margin: 0.25rem;
}

li a {
  border: solid 1px red;
}

HTML（示例 1）

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

参见：Example 1 on JsFiddle

但是现在，我想将列表中的 link 显示为块元素。通常，这是通过在 li a 中添加 display: block; 来完成的。所以例1中的CSS-代码改为：

CSS-代码（例1*）

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

然而，links 不再保持在同一行中，请参阅：Example 1* on JsFiddle

什么是missing/What错了？当 display: block 与默认列表样式（没有伪元素）结合使用时，一切都按预期工作（即：link 显示为块元素；link 和圆盘列表的符号仍在同一行）：

CSS-代码（例2-标准）

ul {
  /* default: list-style: disc; */
}

li { 
  background-color: yellow;
  margin: 0.25rem;
}

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

参见：Example 2 (Standard list with link in block-style)

Answer 1

将这两个 property/values 添加到 li a 选择器：

display: inline-block;
width: 100%;

display: inline 是 <a> 的默认值。不能设置宽度 -- 内联元素像水一样无形
display: block 使元素实心，默认左右占据整个区域。即使它的宽度设置得更小，它也会坚持认为它是唯一占据自己一行的宽度。这就是 Example 1 中出现位移的原因。块元素像金属一样坚韧
display: inline-block 可以轻松地与左右两侧的邻居坐在一起，宽度可以设置。行内块元素像粘土一样灵活。

顺便说一下，为了美观请在 li a 上尝试 text-decoration: none，不要忘记：

a:link
a:visited
a:hover
a:active

按照特定的顺序。

演示

:root,
body {
  font: 400 16px/1.45 Verdana
}

ul {
  list-style: none;
}

li {
  position: relative;
  width: 99%;
  margin-bottom: 6px;
}

li::before {
  position: absolute;
  left: -1.5rem;
  display: inline-block;
  line-height: 1.45;
  vertical-align: middle;
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  padding: 0.15rem 0 0 0;
}

li a {
  display: inline-block;
  line-height: 1.45;
  height: 21px;
  width: 100%;
  padding: 3px 6px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  outline: solid 1px red;
  background-color: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<ul>
  <li><a href="https://whosebug.com/">Whosebug</a></li>
  <li><a href="https://jsfiddle.net">JsFiddle</a></li>
  <li><a href="https://example.com" title='XXXXXXXxxxxx XXXXXXX XXXX XXXXXX XXXXX  x  xxxXXXXX XXXXXXxxx XXX XXXXxxxxxx xxxxxxxxxxxxxXXXx xxxxxxxx'>XXXXXXXxxxxx XXXXXXX XXXX XXXXXX XXXXX  x  xxxXXXXX XXXXXXxxx XXX XXXXxxxxxx xxxxxxxxxxxxxXXXx xxxxxxxx </a></li>
</ul>

将 HTML-link 保持在与 ::before 伪元素同一行的列表中

Keep HTML-link within a list in the same line as ::before pseudo-element

html

css

font-awesome

CSS-代码（例1）

HTML（示例 1）

CSS-代码（例1*）

CSS-代码（例2-标准）

演示