Aligning a custom li bullet with the text

I’m trying to increase the size of the bullet point next to a li element. The consensus seems to be that the way to do this is to remove the “standard” point, insert a custom one using the :before selector, and increase the font size of the inserted point.

Well, this kind of works, but it means the text and the point become misaligned. See here for my code.

Is there a way of resolving this that doesn’t just rely on hardcoding in that the text needs to be moved down by however many pixels?



Set bullet with position:absolute

section {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  width: 300px;
}
ul {
  font-family: 'Segoe UI';
  list-style: none;
  padding: 0;
}
li {
  font-size: 22px;
  line-height: 40px;
  position: relative;
  padding-left: 30px;
}
li::before {
  content: "/2022";
  font-size: 70px;
  vertical-align: middle;
  position: absolute;
  left: 0;
}
<section>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</section>

I’d display is as an inline-table and change the line-height.