垂直对齐锚点：之后

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. 如果我使用行高：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;       
  }