Weird spacing for HTML encoded character?

Question

I am attempting to create a link that includes a right chevron that has a fairly large font. The problem that I have run into is that the right chevron has a very large margin above it that creates a big gap between it and the line above.

In addition to this - I would like the text that is next to it to be vertically centered on the point of the chevron.

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>

You can see an example of what I am talking about here

Should I just use a negative margin to close up this gap or is there a more graceful way to accomplish what I am trying to do? How can I center the text on the point of the chevron? I tried vertical-align:middle but had no luck.

Answer 1

You should use :after :pseudo-element instead of adding extra element. This way you won't have to position both individually, you could simply position the a tag relatively and its :after :pseudo-element absolutely. So that the :after :pseudo-element will follow wherever you position the a tag.

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

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

---

Additionally, on Firefox it shows a weird dotted outline, when you click on an a element.

To prevent this, you could set outline: 0 on a:focus.

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;
}

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