html - 如何在链接文本下对齐 Material 图标？

Question

如何对齐链接文本下方 Material 图标的向下箭头？我尝试使用 :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;
  }
}

JSFIDDLE https://jsfiddle.net/kpvwwveL/6/

Answer 1

添加 display:block 到你的

i{
  display:block;
}

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