css - 定位 span 元素不会改变 div 宽度

Question

我正在创建一个导航栏，它将以与 Facebook 非常相似的方式显示通知(一个带有数字的红色小圆圈)。

使用 span 元素显示未读通知的数量，如下所示:

然后我这样定位它:

当然，像这样定位 span 元素会在右侧留下我想要消除的空间。如何实现？

我想我可以使用 JQuery 将 span 元素的位置设置为与铃铛图标的位置相同(加上偏移量)，但是一定有更简单的方法吗？

我的导航栏只包含 nav 标签内的 anchor 标签。我没有使用列表元素。

这是我导航栏中的通知链接:

  <a href="notifications.php"> 
        <i class="icon fa  fa-bell-o fa-lg"></i> <!-- bell icon -->
        <span><?php echo $num_notifications; ?></span> <!-- number -->
  </a>

span 元素的 CSS:

 position: relative;
 left: -14px;
 top: -8px;

Answer 1

应用匹配的负右边距:

margin-right: -14px;