Weird spacing for HTML encoded character? - html

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>
Let's Go! <span class="big">›</span>
</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>Let's Go!</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>Let's Go!</div>

Answer 2

You could achieve this with relative positioning and line-height definition:
.big {
font-size:80px;
line-height: 30px;
bottom: -10px;
position: relative;
}
a {
text-decoration:none;
font-size: 30px;
}
This is a test
<div>
Let's Go! <span class="big">›</span>
</div>
JSFiddle: http://jsfiddle.net/CaseyRule/ptrxv99n/8/

Answer 3

<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>
Let's Go! <span class="big">›</span>

Answer 4

I would use an image and set the background property of your anchor tag to use this image. You can adjust the padding to however much space you need to accommodate the chevron image.
a {
text-decoration:none;
font-size: 30px;
padding-right:30px;
background-image: url('/path/to/image.gif');
background-position: right center;
}
This would apply the chevron to all links on your page. You can of course use a CSS class to limit the chevron to specific hyperlinks.
a.chevroned { .... }
Let's Go!