Larger gap between first and second elements in a list - html

Question

In the list below, the spans do not line up to the center of their corresponding dots. I believe this is caused by the larger gap between the first and second spans.
HTML
<nav class="side-nav-right">
<ul>
<li class="bullet">
<a data-scroll href="#center-splash"><span style="width: 66px; left: -80px;">Intro</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section1"><span style="width: 66px; left: -80px;">section1</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section2"><span style="width: 66px; left: -80px;">section2</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section3"><span style="width: 66px; left: -80px;">section3</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section4"><span style="width: 66px; left: -80px;">section4</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section5"><span style="width: 66px; left: -80px;">section5</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section6"><span style="width: 66px; left: -80px;">section6</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section7"><span style="width: 66px; left: -80px;">section7</span></a>
</li>
</ul>
</nav>
SCSS
.side-nav-right {
display: block;
position: fixed;
top: 20%;
right: 1rem;
ul {
list-style: none outside;
li {
margin-bottom: 1rem;
a {
color: transparent;
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: $light-text;
box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red;
vertical-align: top;
&.active {
background: #808080;
box-shadow: none;
}
}
span {
color: $light-text;
position: absolute;
background: rgba(0,0,0,0.7);
display: none;
padding: 0.25rem 0.5rem;
border-radius: 3px;
vertical-align: middle;
}
span:before {
content:"";
display:block;
width:0;
height:0;
border:solid 5px;
border-color:transparent transparent transparent rgba(0,0,0,0.7);
position:absolute;
right:-10px;
top:9px
}
&:hover span {
display: block;
}
}
li:first-child a>span{top:-5px}
}
}
#media only screen and (min-width: 1025px) {
.side-nav-right {
top: 30%;
right: 2rem;
ul {
li {
margin-bottom: 1.5rem;
a {
width: 1.25rem;
height: 1.25rem;
}
}
}
}
}
vertical-align seems to do nothing, commenting out all margins and padding doesn't work. I'm at a loss for why these elements aren't lining up past the first one.

Answer 1

You're looking at it the other way around. Notice that only your first element has a specific top property set to it:
li:first-child a>span{top:-5px}
The others do not.
Just align the others, and have the first one adjusted.
In this Fiddle I gave a margin-top to all spans and removed the special treatment for the first child. Might only be working on this fiddle and your exact measurements might need some adjustments, if so correct the fiddle.
span {
color: black;
position: absolute;
background: rgba(0,0,0,0.7);
display: none;
padding: 0.25rem 0.5rem;
border-radius: 3px;
vertical-align: middle;
margin-top: -8px;
}

Answer 2

Here is the solution without affecting your original code structure:
Replace your html with followg code:
<nav class="side-nav-right">
<ul>
<li class="bullet">
<a data-scroll href="#center-splash"><span>Intro</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section1"><span>section1</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section2"><span>section2</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section3"><span>section3</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section4"><span>section4</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section5"><span>section5</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section6"><span>section6</span></a>
</li>
<li class="bullet">
<a data-scroll href="#section7"><span>section7</span></a>
</li>
</ul>
</nav>
Then replace your css with following code:
.side-nav-right {
display: block;
position: fixed;
top: 20%;
right: 1rem;
ul {
list-style: none outside;
li {
margin-bottom: 1rem;
position:relative;
a {
color: transparent;
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: $light-text;
box-shadow: inset 0.025rem 0.025rem 0.075rem $PG-red;
vertical-align: top;
&.active {
background: #808080;
box-shadow: none;
}
}
span {
color: $light-text;
position: absolute;
background: rgba(0,0,0,0.7);
display: none;
padding: 0.25rem 0.5rem;
border-radius: 3px;
vertical-align: middle;
width: 66px;
left: -90px;
top:-4px;
}
span:before {
content:"";
display:block;
width:0;
height:0;
border:solid 5px;
border-color:transparent transparent transparent rgba(0,0,0,0.7);
position:absolute;
right:-10px;
top:9px
}
&:hover span {
display: block;
}
}
li:first-child a>span{top:-5px}
}
}
#media only screen and (min-width: 1025px) {
.side-nav-right {
top: 30%;
right: 2rem;
ul {
li {
margin-bottom: 1.5rem;
a {
width: 1.25rem;
height: 1.25rem;
}
}
}
}
}