Strange spacing for HTML encoded character?
I'm trying to create a link that includes the right chevron, which is in a fairly large font. The problem I am facing is that the right chevron has a very large margin above it, which creates a large gap between it and the line above.
In addition to this, I would like the text next to it to be vertically centered at the chevron point.
CSS
.big
{
font-size:80px;
}
a
{
text-decoration:none;
font-size: 30px;
}
HTML:
This is a test
<div>
<a href="">Let Go! <span class="big">›</span></a>
</div>
You can see an example of what I am talking about here
Should I just use negative margin to close this gap, or is there a nicer way to accomplish what I'm trying to do? How can I focus the text on the chevron point? I tried vertical-align:middle
it but no luck.
source to share
You should use :after
: pseudo-element instead of adding extra element. This way you don't have to position as individually, you can just position the tag a
relative to and its :after
: pseudo-element absolutely. So the pseudo-element :after
: will follow wherever you position the tag a
.
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 Go!</a></div>
Also, in Firefox, it shows a weird dotted pattern when you click on an element a
.
To prevent this, you can set outline: 0
to 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 Go!</a></div>
source to share
You can achieve this with relative positioning and defining the line height:
.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 Go! <span class="big">›</span></a>
</div>
source to share
I would use an image and set the background property of your anchor tag to use that image. You can adjust the padding to whatever space you need to fit 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 will apply the chevron to all links on your page. You can of course use a CSS class to constrain the chevron to specific hyperlinks.
a.chevroned { .... }
<a href="" class="chevroned">Let Go!</a>
source to share