Firefoxでfirst-letterが効かな時の解決法

先日英語サイトを作成している際に1文字目のみ大文字にしたい機会がありました。
1文字目のみ大文字にすること自体は割と簡単にできます。

まずは私が実装した方法から。

1
2
3
4
5
6
<ul>
  <li><a href="">news</a></li>
  <li><a href="">outline</a></li>
  <li><a href="">visit</a></li>
  <li><a href="">contact</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    list-style: none;
    flex: 1;
    a {
      display: block;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #333;
      font-weight: 600;
      text-transform: lowercase;
      &:first-letter {
        text-transform: capitalize;
      }
    }
  }
}

上記CSS上の、「text-transform: lowercase;」で全体を小文字としてリセットしています。
そのあと「&:first-letter」で1文字目の指定をして、そこで「text-transform: capitalize;」を指定して大文字化しています。

safariやchromeであれば上記の方法で適応されているのですがなぜかFirefoxでは効かない…。
いろいろ調べていると。そもそも「first-letter」はブロック要素にしかききません、という情報を発見しました。
しかしながら今回私はaタグをブロック要素に指定しています。

試しに以下のようにaタグを変更することに…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    list-style: none;
    flex: 1;
    a {
      display: inline;　//ここをインライン要素に
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #333;
      font-weight: 600;
      text-transform: lowercase;
      &:first-letter {
        text-transform: capitalize;
      }
    }
  }
}

そうするとなぜかFirefoxでも効きました。
結局のところ詳しいところはわからないのですが、ブロック要素でうまくいってない方はデザインに支障がなければインライン要素に変えてみてください。
他の方の助けになれば幸いです！

それでは！

Share: