I am working with Rmarkdown' flexdashboard which uses some CSS framework (bootstrap based I guess), which produuces a nice looking storyboard. It introduces a sort of navigation bar using the following markup:

<div class="sbframelist" style="overflow: hidden;">
  <ul style="transform: translateZ(0px); width: 548px;">
    <li class="active">Label A</li>
    <li>Label B</li>
  </ul>
</div>

looking like this:

I would like to add a number as a watermark (ideally with some transparency). That is it should look like this (font size, color and style should be different, but I guess I will manage to change that):

I tried the following CSS but to no avail:

.storyboard .storyboard-nav .sbframelist > ul > li {
  position: relative;
}

.storyboard .storyboard-nav .sbframelist > ul > li:before {
  content: '1';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

Bonuspoint would be if the content is not hard coded but uses the position of the <li> within the <ul> but I will manage to hardcode these values in case it is not that easy.