How to stop the jittering on the circles when hovering - html

Question

I have created a basic menu with years on the top and a circle below. When hovering over the li the font size is increased but this seems to be causing a wobble or jitter on the circle below.
How do I stop this and have smooth effect on hover? I have included my css and html in a code snippet so you can see what I am talking about.
#timeline ul {
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-block;
float: none;
width: 5%;
max-width: 140px;
padding: 25px 0;
transition: all .3s ease;
box-sizing: border-box;
text-align: center;
font-family: alternate-gothic-no-3-d,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 20px;
}
#timeline ul .hovered, #timeline ul li:hover {
transition: all .5s;
font-size: 35px;
cursor: pointer;
padding-top: 12px;
padding-bottom: 21px;
}
#timeline ul li .indicator {
display: block;
}
#timeline ul li .title:before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 12px;
height: 12px;
border: 3px solid #a39688;
border-radius: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: all .3s ease;
}
<div id="timeline">
<ul class="timeline-list">
<li class="" data-number="1">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="2">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="hovered" data-number="3">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="4">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="5">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="6">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="7">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="8">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="9">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="10">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="11">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
</ul>
</div>

Answer 1

Try to made the .title absolute as i did in the code
#timeline ul {
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
span.title {
position: absolute;
width: 100%;
text-align: center;
left: 0;
bottom: 20px;
}
ul li {
position: relative;
display: inline-block;
float: none;
width: 5%;
max-width: 140px;
padding: 25px 0;
transition: all .3s ease;
box-sizing: border-box;
text-align: center;
font-family: alternate-gothic-no-3-d,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 20px;
height: 80px;
}
#timeline ul .hovered, #timeline ul li:hover {
transition: all .5s;
font-size: 35px;
cursor: pointer;
padding-top: 12px;
padding-bottom: 21px;
}
#timeline ul li .indicator {
display: block;
}
#timeline ul li:before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 12px;
height: 12px;
border: 3px solid #a39688;
border-radius: 100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: all .3s ease;
}
<div id="timeline">
<ul class="timeline-list">
<li class="" data-number="1">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="2">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="hovered" data-number="3">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="4">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="5">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="6">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="7">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="8">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="9">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="10">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
<li class="" data-number="11">
<span class="indicator"></span>
<span class="title">1861</span>
</li>
</ul>
</div>

Answer 2

You have a few problems:
inline blocks don't like whitespace between them
add vertical-align: top; to the css of ul li
the main problem is you're trying to substitute font-size for padding. In the normal li it is 25px padding + 20px font + 25px padding, in the hover it is 12px padding + 35px font.
the solution: remove all the padding, and only add line-height: 75px to the css of ul li
Here's a working fiddle