Question

我们正在使用Material Design Icons，但是图标的垂直对齐非常奇怪...因此我将图标的垂直对齐方式更改为底部。

但是当文本和图标位于链接中时，图标的下划线属性会低于Chrome中文本的下划线。在Firefox中，一切都按预期工作。

是否有更好的方法来正确定位材料设计图标？或者我如何解决在错误位置绘制下划线的问题？

a {
  text-decoration: underline;
}

a:before {
  content: "\E315";
  font-family: 'Material Icons';
  vertical-align: bottom;
}

有关完整示例，请参阅此jsfiddle： https://jsfiddle.net/uumn0bbt/3/

谢谢！斯泰恩

Answer 1

文字修饰无法使用：伪元素，您可以看到如果您尝试使用此代码（您可以在此处找到explanation）：

a:before {
    content: "\E315";
    font-family: 'Material Icons';
    margin-top: 5px;
    text-decoration: none !important;
    vertical-align: bottom;
}

所以，让我粘贴在那里建议的内容：

将文本换行到自己的span元素中，然后将文本修饰应用于该范围



使用内嵌块背景图像而不是内嵌文本   图标字体与您的：之前的伪元素

换句话说，您需要添加额外的代码，同时您还可以尝试使用列表并将这些图标添加为list-style-image，但之后您将不会使用字体完全如此，如果观众正在缩放，结果可能是扭曲的图像。

Answer 2

您可以使用text-decoration: underline在伪:after元素中重建border-bottom。

这是一个例子。

＆＃13;

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


a {
  text-decoration: none;
  position: relative;
}

a:before {
  content: "\E315";
  font-family: 'Material Icons';
  vertical-align: bottom;
}

a:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 1px;
  border-width: 0 0 1px;
  border-style: solid;
}

＆＃13;

<a href="#">underline, icon v-align bottom</a>

＆＃13;

Answer 3

a.bottom:after { /* changed before to after */
  vertical-align: bottom;
}

这有助于解决您的问题吗？

材料设计图标vertical-align，chrome

3 个答案: