0

We are using Material Design Icons, but the vertical alignment of icons is very odd...Therefore I changed the vertical alignment of the icon to bottom.

But when the text and icon are inside a link, the underline property of the icon is drawn lower then the underline of text in Chrome. In Firefox everything works as expected.

Is there is a better way to position the material design icons properly? Or how can I solve the issue of the underline being drawn at the incorrect position?

a {
  text-decoration: underline;
}

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

See this jsfiddle for full sample: https://jsfiddle.net/uumn0bbt/3/

Thanks! Stijn

Stijn
  • 349
  • 1
  • 19

3 Answers3

1

Text decoration will not work on :pseudo elements, as you can see if you try this code (you can find an explanation here):

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

So let me paste what has been suggested there:

  • Wrap the text in its own span element, then apply text-decoration to that span

  • Use an inline block background image instead of inline text in an icon font with your :before pseudo-element

In other words, you will need to add an extra code, while you could also try using lists and adding those icons as list-style-image, but then you wouldn't be using fonts at all, so the outcome could be distorted images if the viewer is zooming.

Community
  • 1
  • 1
Bruno Kos
  • 645
  • 2
  • 8
  • 18
1

You could rebuild the text-decoration: underline within the pseudo :after element using border-bottom.

Here is an example. 

@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;
}
<a href="#">underline, icon v-align bottom</a>
DavidDomain
  • 14,976
  • 4
  • 42
  • 50
0
a.bottom:after { /* changed before to after */
  vertical-align: bottom;
}

Does that helps to solve your problem?

sts
  • 62
  • 8