Как выровнять значок материала по тексту ссылки?

Question

Как выровнять стрелку вниз от значков материалов по тексту ссылки? Я пробовал использовать псевдокласс класса :after, но он не сработал.

HTML:

<div class="jump-to-links"> 
    <ul class="list-unstyled"> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></a> 
     </li> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></a> 
     </li> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></a> 
     </li> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></li></a> 
    </ul> 
    </div> 

SCSS:

.jump-to-links { 
    .material-icons { 
    @include centerX(); 
    bottom: -20px; 
    color: $purple; 
    padding: 10px 0px 10px 0px; 
    } 
    text-align: center; 
    a,a:hover { 
    text-decoration: none; 
    color: $black; 
    font-weight: bold; 
    display: inline-block; 
    } 
    ul li { 
    display: inline-block; 
    margin-right: 12%; 
    } 
    li { 
    cursor: pointer; 
    text-align: center; 
    position: relative; 
    } 
} 

JSFIDDLEhttps://jsfiddle.net/kpvwwveL/6/

Answer 1

Добавить дисплей: блок ваш

i{ 
    display:block; 
} 

https://jsfiddle.net/kpvwwveL/3/

Answer 2

Я обнаружил это, как лучший способ решить проблему выравнивания:

<div class="jump-to-links"> 
    <ul class="list-unstyled"> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></a> 
     </li> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></a> 
     </li> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></a> 
     </li> 
     <li> 
     <a href="#">Link<i class="material-icons">&#xE313;</i></li></a> 
    </ul> 
    </div> 


.jump-to-links { 
    .material-icons { 
    @include centerX(); 
    bottom: -20px; 
    color: $purple; 
    padding: 10px 0px 10px 0px; 
    } 
    text-align: center; 
    a,a:hover { 
    text-decoration: none; 
    color: $black; 
    font-weight: bold; 
    display: inline-block; 
    } 
    ul li { 
    display: inline-block; 
    margin-right: 12%; 
    } 
    li { 
    cursor: pointer; 
    text-align: center; 
    position: relative; 
    } 
} 

Answer 3

Почему усложнять вещи, а не идти естественным путем? Который, я думаю, должен положить разрывы строк между текстом ссылки и i.

<a href="#"> 
    Link 
    <br> 
    <i class="material-icons arrow-down">keyboard_arrow_down</i> 
    </a> 

https://jsfiddle.net/weejoy22/