Microsoft.com 上的下拉箭头

【问题标题】：Dropdown arrow on Microsoft.comMicrosoft.com 上的下拉箭头
【发布时间】：2013-06-25 16:17:25
【问题描述】：

Microsoft 如何在其页面上设置下拉箭头？我检查了 CSS 和 HTML，但我不知道它是如何完成的。

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

当我使用 Firebug 进行检查时，我看到：

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

因此，如您所见，M$ 正在使用:after 和content: 添加伪内容。

【讨论】：