JSFiddle - React, Tailwind, and code Playground

HTML

<p class="movie-category">
  <span>Sentimental</span>
  <span>Romantic</span>
  <span>Dramedy</span>
</p>

SCSS

.movie-category {
  font-size: 3em;
  display: inline-flex;
  justify-content: space-between;
  background: blue;

  > span:not(:last-child) {
    $distance: 1em;
    $half-distance: $distance / 2;
    margin: 0 $distance 0 0;

    position: relative;
  }
  > span:not(:last-child)::after {
    $size: .2em;
    $half-size: $size / 2;

    content: '';
    position: absolute;
    top: calc(50% - $half-size);
    left: calc(100% + $half-distance - $half-size);

    display: block;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: red;
  }
}