html - Microsoft.com 上的下拉箭头

Question

微软如何在他们的页面上做下拉箭头？我检查了 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:。