Chrome 中 span 无法撑开 a

在 blog 正文下面添加前一篇和后一篇按钮，遇到浏览器兼容问题。

问题描述

代码

<div class="pagination clearfix">
  <ul class="pull-right">
  {% if page.previous %}
    <li class="prev"><a class="fa fa-arrow-circle-left" href="{{ BASE_PATH }}{{ page.previous.url }}" title="{{ page.previous.title }}">前一篇</a></li>
  {% else %}
    <li class="prev disabled"><a class="fa fa-arrow-circle-left">前一篇</a></li>
  {% endif %}
    <li><a class="fa fa-th" href="{{ BASE_PATH }}{{ site.JB.archive_path }}">所有文档</a></li>
  {% if page.next %}
    <li class="next"><a href="{{ BASE_PATH }}{{ page.next.url }}" title="{{ page.next.title }}">后一篇<span class="fa fa-arrow-circle-right"></span></a></li>
  {% else %}
    <li class="next disabled"><a>后一篇<span class="fa fa-arrow-circle-right"></span></a>
  {% endif %}
  </ul>
</div>

期望结果

经实验，在 Firefox 和 Edge 中达到预期效果，在 Chrome 中显示有问题（右侧缺失）

首先想到的解决方法是添加 css 样式

.fa-arrow-circle-right {
    margin-right: 12px;
}

结果在 Chrome 中达到预期效果，在 Firefox 和 Edge 中显示有问题（右侧多出一部分）

解决方法

添加 css 样式

.fa-arrow-circle-right-after:after {/* chrome 浏览器中 span 无法撑开 a */
  content: '\f0a9';
}

修改代码

<div class="pagination clearfix">
  <ul class="pull-right">
  {% if page.previous %}
    <li class="prev"><a class="fa fa-arrow-circle-left" href="{{ BASE_PATH }}{{ page.previous.url }}" title="{{ page.previous.title }}">前一篇</a></li>
  {% else %}
    <li class="prev disabled"><a class="fa fa-arrow-circle-left">前一篇</a></li>
  {% endif %}
    <li><a class="fa fa-th" href="{{ BASE_PATH }}{{ site.JB.archive_path }}">所有文档</a></li>
  {% if page.next %}
    <li class="next"><a class="fa fa-arrow-circle-right-after" href="{{ BASE_PATH }}{{ page.next.url }}" title="{{ page.next.title }}">后一篇</a></li>
  {% else %}
    <li class="next disabled"><a class="fa fa-arrow-circle-right-after">后一篇</a>
  {% endif %}
  </ul>
</div>