The first three items work as expected, but the others are not - please check the attached picture.
HTML:
<div class="citation-links">
<a href="linkout" target="_blank" class="ref-link ui-link">CrossRef</a>
<a href="linkout" target="_blank" class="ref-link ui-link">PubMed</a>
<a href="linkout" target="_blank" class="ref-link ui-link">CAS</a>
</div>
CSS:
.ref-link {
display: inline-block;
padding: 0em .75em .15em;
margin: 0 .25em 0;
color: #FFF !important;
background-color: #4E4E4E;
line-height: 1.2em;
font-size: .75em;
position: relative;
top: -.15em;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
}
A colleague of mine has found a solution to this issue. What was causing this issue is the below styles:
position: relative;
top: -.15em;
Removing the above two styles made it working perfectly.