ナビ項目の文字の後ろに「▼」をつけたのですが、そのままだと、文字よりも「▼」のほうが大きく見えてしまい、文字よりも「▼」が目立ってしまった（汗）
それを解消するために「span」で「▼」だけフォントサイズを小さくしてみたのですが…
◎HTML
<ul>
<li>Home</li>
<li>ご案内<span class="ss">▼</span></li>
<li>会社概要<span class="ss">▼</span></li>
<li>事業内容<span class="ss">▼</span></li>
<li>関連リンク<span class="ss">▼</span></li>
<li>お問い合わせ</li>
</ul>◎CSS
.ss {
font-size: 50%;
padding: 0 4px;
}
「▼」だけをもう少し上に移動させいたい！
marginやpaddingを試したけど、変化無し。。。。
span要素にインラインの性質を持たせつつ、
中のテキストを上下中央にしたいのなら、
「display:inline-flex;」使えばよいとの記事を発見！
さっそく、試したところ思ったような結果になりました。
◎CSS
.ss {
display: inline-flex;
font-size: 50%;
vertical-align: middle;
padding: 0 4px;
}参考になったサイト：https://qiita.com/super-mana-chan/items/0d35a0b9ac1bf97593c8