Like superscript in link

Question

.project-link {
font-family:Arial; 
display:inline-block;
color:#FFF;
font-size:5vw;
white-space:nowrap;
text-decoration:underline;
margin-right: 3%;
line-height:120%;
}
body {
  background-color: black;
}

<a class="project-link" id="one" href="#modal1">Maru Speaker Design <sup> (1) </sup> </a>
<

Run codeHide result

I am trying to get (1) to be superscript.

EDIT https://jsfiddle.net/v1jn1nus/

Added pic with Arial font.

I just do not understand. He also works on the violin ...

Answer 1

This vertical-align:super;is why check to see if your style matches the reset vertical-align for this element.

Check this:

.project-link {
font-family:Arial; 
display:inline-block;
color:#FFF;
font-size:5vw;
white-space:nowrap;
text-decoration:underline;
margin-right: 3%;
line-height:120%;
}

.project-link > span { vertical-align:super; }

body {
  background-color: black;
}

<a class="project-link" id="one" href="#modal1">Maru Speaker Design <span> (1) </span> </a>
<

Run codeHide result