a: эффект наведения, нарушающий межбуквенный интервал :: первая строка в Firefox - PullRequest
Новая
       53

a: эффект наведения, нарушающий межбуквенный интервал :: первая строка в Firefox

0 голосов
/ 07 ноября 2018

Я хочу <a> с переходным эффектом наведения в первой строке абзаца, который задает межбуквенный интервал с ::first-line.
В Firefox это ломает letter-spacing при наведении курсора!

  • В первой строке используется стиль letter-spacing
  • <a> в первой строке прервет letter-spacing, если он применяет стили с :hover (в Firefox, а не в Chromium)
  • Вы можете обойти это, добавив a:hover::first-line { letter-spacing: inherit; }
  • Однако, если есть переход, он снова ломается!

Это демонстрирует: codepen или этот фрагмент: 

p {
  font-size: larger;
  letter-spacing: 0.1em;
}
p::first-line {
  font-variant: small-caps;
  letter-spacing: 0.2em;
}
a {
  color: red;
  text-decoration: underline;
}

/* Break letter-spacing */
a:hover {
  color: blue;
}

/* Work around */
.example-2 a:hover::first-line {
  letter-spacing: inherit;
}

/* Break it again */
.example-3 a {
  transition: color 2s;
}
.example-3 a:hover::first-line {
  letter-spacing: inherit;
}
<p><a>letter-spacing with ::first-line is buggy</a> when combined with hover effects. Etc. etc. etc.</p>
<p class="example-2">Lorem ipsum <a>there's a workaround</a> Etc. etc. etc.</p>
<p class="example-3">Lorem ipsum <a>which breaks when you use a transition</a> sit amet, consectetuer adipiscing elit? Aenean commodo ligula eget dolor? Aenean massa! Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus? Assuming we are in the body of the paragraph, <a>This works fine, the bug is confined to ::first-line pseudo-elements</a>. Etc. etc. etc.</p>

Кто-нибудь знает, как я могу обойти это, или вижу что-то, что я пропустил? Спасибо.

Протестировано в Firefox 63.0.1 (64-битная версия) (ломается) и в Chromium версии 68.0.3440.106 (Официальная сборка) (64-битная версия) (работает)

...