HTML编码字符的奇怪间距？

Question

我正在尝试创建一个包含右V形字体的链接，该字体具有相当大的字体。我遇到的问题是，正确的人字形在它上面有很大的余量，这会在它和上面的线之间产生很大的差距。

除此之外 - 我希望它旁边的文字垂直居中于雪佛龙的点上。

CSS：

.big
{
    font-size:80px;
}
a
{
    text-decoration:none;
    font-size: 30px;
}

HTML：

This is a test
<div>
    <a href="">Let's Go! <span class="big">&rsaquo;</span></a>
</div>

您可以看到example of what I am talking about here

我应该use a negative margin来弥补这个差距，还是有更优雅的方式来完成我想做的事情？如何将文字置于雪佛龙的中心位置？我试过vertical-align:middle但没有运气。

Answer 1

您应该使用:after：pseudo-element而不是添加额外的元素。通过这种方式，您不必单独定位，您可以简单地将a标记与其:after：伪元素进行相对定位。因此:after：伪元素将会跟随您放置a标记的位置。

＆＃13;

＆＃13;

a {
    text-decoration:none;
    font-size: 30px;
    position: relative;
    top: 20px;
}
a:after {
    content: '›';
    font-size: 80px;
    position: absolute;
    bottom: -20px;
    right: -30px;
}

＆＃13;

This is a test
<div><a href="#">Let's Go!</a></div>

＆＃13;

＆＃13;

＆＃13;

---

此外，在Firefox上，当您点击a元素时，它会显示一个奇怪的虚线轮廓。

为防止这种情况发生，您可以在outline: 0上设置a:focus。

＆＃13;

＆＃13;

a {
    text-decoration:none;
    font-size: 30px;
    position: relative;
    top: 20px;
}
a:after {
    content: '›';
    font-size: 80px;
    position: absolute;
    bottom: -20px;
    right: -30px;
}
a:focus {
    outline: 0;
}

＆＃13;

This is a test
<div><a href="#">Let's Go!</a></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<style type="text/css">
.big{
    font-size:80px;
    line-height:30px;
    position:absolute;
    top:2px;
}
a{
    text-decoration:none;
    font-size: 30px;
    position:relative;
}
</style>

<a href="">Let's Go! <span class="big">&rsaquo;</span></a>

Answer 3

您可以通过相对定位和线高定义来实现这一目标：

.big {
    font-size:80px;
    line-height: 30px;
    bottom: -10px;
    position: relative;
}
a {
    text-decoration:none;
    font-size: 30px;
}

This is a test
<div>
    <a href="">Let's Go! <span class="big">&rsaquo;</span></a>
</div>

JSFiddle：http://jsfiddle.net/CaseyRule/ptrxv99n/8/

Answer 4

我会使用图像并设置锚标记的背景属性以使用此图像。您可以将填充调整到适合人字形图像所需的空间。

a {
  text-decoration:none;
  font-size: 30px;
  padding-right:30px;
  background-image: url('/path/to/image.gif');
  background-position: right center;
}

这会将雪佛龙应用于您网页上的所有链接。您当然可以使用CSS类将V形符号限制为特定的超链接。

a.chevroned { .... }

<a href="" class="chevroned">Let's Go!</a>