如何使字形字形周围的边框与视觉效果匹配

Question

如果运行以下代码段，则可以看到.item指定的字形字形周围的边框与字形的外观不太吻合，从而导致基于:hover的字形变小比完美。我已经使用

对此进行了测试

• Firefox 61.0.2版（64位）

• Chrome版本69.0.3497.100（正式版本）（64位）

/* show some text */
div {
  text-align: center;
}

abbr[showMe] {
  text-decoration: none;
  font-size: 300%;
}

abbr[showMe]:hover:after {
  content: attr(showMe);
}

.item {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<p>Hover to see my info</p>
<div>
  <abbr class="item" showMe="555 555 5555">
    <i class="fas fa-mobile text-secondary"></i>
  </abbr>
</div>
<div>
  <abbr class="item" showMe="email at domain dot com">
    <i class="fas fa-envelope text-secondary"></i>
  </abbr>
</div>

我应该怎么做才能使我使用的所有图标的边框整齐地包裹起来？如果没有解决此问题的简便方法（或者很酷，但是很酷；），我就不会无奈地创建自己的SVG。