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;
}
Material design icon vertical-align
-
- Posts: 117
- Joined: Thu Aug 27, 2015 7:16 am
Re: Material design icon vertical-align
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>
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>
Who is online
Users browsing this forum: No registered users and 1 guest