html - 更正带有字体 awesome 的移动设备链接中断(HTML、CSS)

Question

我有一个带有超赞字体图标的有序列表。我想让它正确断开。

我的代码:

https://codepen.io/altos/pen/BragXj

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ol>
  <li><a href="#" target="_blank">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 3 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 4 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
</ol>

我的目标:

Answer 1

我会在 li 上添加填充，然后在 li 上使用 before 和 after 绝对定位数字和箭头:

ol {
  padding-left: 0;
  counter-reset: item;
  list-style-type: none;
}

ol li {
  position: relative;
  padding-left: 3em;
  line-height: 20px;
  /* match font size of font awesome icon */
}

ol li:before {
  content: counter(item, decimal-leading-zero) " ";
  counter-increment: item;
  display: inline-block;
  position: absolute;
  left: 0;
}

ol li:after {
  color: #E3000B;
  padding-right: 8px;
  font-size: 20px;
  font-family: FontAwesome;
  content: "";
  display: inline-block;
  position: absolute;
  left: 1.2em;
  top: -0.1em;
  /* seems to vertically align icon to number better */
}

a {
  text-decoration: none;
  display: inline-block;
  position: relative;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ol>
  <li><a href="#" target="_blank">Link 1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 2 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 3 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
  <li><a href="#" target="_blank">Link 4 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a></li>
</ol>