Как сделать так, чтобы границы вокруг красивых символов совпадали с визуальными - PullRequest
Новая
       7

Как сделать так, чтобы границы вокруг красивых символов совпадали с визуальными

0 голосов
/ 20 сентября 2018

Если вы запустите следующий фрагмент кода, вы увидите, что граница вокруг удивительных глифов, указанных в .item, не совсем совпадает с визуальными элементами глифа, в результате чего :hover на основе будет не идеальным.Я проверил это, используя

  • Firefox версии 61.0.2 (64-разрядная версия)

Firefox result

  • Chrome версии 69.0.3497.100 (официальная сборка) (64-разрядная версия)

enter image description here

/* 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 как последнее средство, если нет простого (или сложного, но крутого;)) решения этой проблемы.

...