セレクタ指定した要素にafter要素でアイコンをつけたい

Question

プログラミング初心者です。お手柔らかにお願いします。
下記コード内のnav-linkの初めの「商品情報」の後ろだけにfont-awesomeのアイコン（f107）をつけたいです。わかる方教えていただければ幸いです。

<div class="collapse navbar-collapse" >
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#" cotent="">商品情報</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特集・サービス</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">エリア情報・サッポロを飲む</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">工場見学・ミュージアム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">キャンペーン・CM</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">企業情報</i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">採用情報</i></a>
        </li>
      </ul>
    </div>

.nav-link:fisst-of-type::after{
  font-family: "Font Awesome 5 Free";
  content:'\f107';
}

セレクタ指定しつつのafter要素のつけ方がわかりません。
できればクラス名は変更したくありません。
HTMLにstyleタグで入れる方法も考えたのですが、fontawesomeを入れる方法がググってもわかりませんでした。

Answer 1

:fisst-of-type ではなく :first-of-type で、:first-of-type は「兄弟要素の中の同一要素で1番目」なのでliに付けないといけません。

-    .nav-link:fisst-of-type::after
+    .nav-item:first-of-type .nav-link::after

Comments

[itokin]

初歩的な質問ですいませんでした。ありがとうございました。