css - 使用 :After 垂直对齐锚点

Question

我有一个简单的锚点如下：

<a href="#">News</a>

我想在右边添加一个“+”号，所以我使用了“:after”。

在线示例：http ://codepen.io/mdmoura/pen/IDakn

但我需要“+”号大于锚文本。

问题是在这种情况下，文本和“+”号没有垂直对齐。

更新

正如 Dale 所说，使用 line-height 解决了这个问题，但是：

1. 如果我使用 line-height: 1.5rem 它工作正常 - http://codepen.io/mdmoura/pen/ogriw；

2. 如果我使用 line-height: 1.5 那么它不起作用 - http://codepen.io/mdmoura/pen/IDakn；

为什么？不应该在没有单位的情况下指定行高吗？

谢谢你，米格尔

Answer 1

CSS line-height 将是这里的问题。给锚点一个大约 20px 的行高，使其与文本对齐。

a{line-height:20px;}

Answer 2

这可能是作弊，但您可以使用line-height它:after来调整垂直对齐：

  &:after {     
    line-height:0.5em;       
  }