Material design icon vertical-align

Welcome to ScriptMode
Sankar
Posts: 54
Joined: Thu Dec 10, 2015 11:55 am

Material design icon vertical-align

Postby Sankar » Mon Mar 07, 2016 2:04 pm

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;
}

Heisenberg
Posts: 117
Joined: Thu Aug 27, 2015 7:16 am

Re: Material design icon vertical-align

Postby Heisenberg » Wed Mar 09, 2016 9:33 am

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>


Return to “General”

Who is online

Users browsing this forum: No registered users and 3 guests