html - Microsoft.com のドロップダウン矢印

Question

Microsoft はどのようにページにドロップダウン矢印を表示していますか? CSS と HTML を調べましたが、それがどのように行われているかわかりません。

Answer 1

特殊なフォント文字です。Chrome Dev Tools などのツールで style.cssx を参照してください

@media screen and (min-width: 540px)
.dropdown>a:after {
margin-left: .35em;
font-family: "MSHPIconsRegular";
content: '';
font-size: .688em;
}

Answer 2

Firebug で調べると、次のように表示されます。

.dropdown > a:after {
    content: "";
    font-family: "MSHPIconsRegular";
    font-size: 0.688em;
    margin-left: 0.35em;
}

ご覧のとおり、M$ は疑似コンテンツを:afterandで追加していcontent:ます。