ボタンの中に「＞」のマークを入れたい。

実現したいこと

無料カウンセリングの文字のあとに「＞」のマークを入れたい。

該当のソースコード

HTML

1 <nav class="hamburger-menu header-nav"> 2 <ul class="hamburger-menu-list-group header-nav-list-group flex outfit"> 3 <li><span class="border"><a href="#overview">施設概要</a></span></li> 4 <li><span class="border"><a href="#access">アクセス</a></span></li> 5 <li><span class="border"><a href="#inquiry">お問合せ</a></span></li> 6 </ul> 7 </nav>

CSS

1 .header-nav::after {2 content: "無料カウンセリング";3 position: relative;4 display: block;5 color: #ffffff;6 text-align: center;7 border-radius: 15px;8 background-color: #0097a7;9 }10

試したこと

CSS

1 .header-nav::after::after {2 content: ">";3 }

上記のように::after::afterとやったのですが、実際に入っていないようです。