HTML/CSS 目次のロゴの実装方法

Question

こちらのホームページの目次のロゴはどのように実装されているのでしょうか？

（葉っぱのロゴ）初心者向け
（地球のロゴ）SEO対策
（ペンのロゴ）記事作成

のような（）の部分です。
画像かな？と思ったのですが、右クリックでコピーできないし、
HTMLでは <div class="widget-hoge nav_box"> というので定義されていて、分かりませんでした。

よろしくお願いします。

Answer 1

デベロッパーツールで確認すると

<h2>
  :before
  タイトル
</h2>

となっていることがわかるかと思います
beforeにフォーカスすると、
右側にCSSが表示され葉っぱであれば

.toppage_nav .nav_box:nth-child(1) h2:before{
  margin-right: 10px;
  content: "\f06c";
}

と記述されています
afterの使い方とかは学ぶ必要がありますがcontentの中身が文字になります
CSS - contentで記号（特殊文字）を表示する方法。コード表やシミュレーター有り(疑似要素:beforeや:afterにて)｜及川WEB室
この辺見て学んでみるといいかなと思います

Comments

[ruei]

ありがとうございます。