Height Animation Hiding :Before Pseudo Element

I’m attempting to create an animated timeline. I’m using scroll reveal to trigger the animation when the timeline comes into view. Each timeline entry has a left border and a pseudo element :before associated with it. The :before element is a dot that marks the beginning of each timeline entry. When animating the height of the divs that contain the border, the :before pseudo element overflow is cut off. I’ve set overflow to visible with the !important flag but that doesn’t seem to do the trick. Does anyone know why the :before pseudo element is being cut off? Thanks for the help!

$(function() {
  $('.tml-content h2').css("opacity", 0);
  $('.tml-content p').css("opacity", 0);
  var height = $('.timeline').height();
  $('.timeline').height(height);
  window.sr = ScrollReveal();
  var config = {
    // 'bottom', 'left', 'top', 'right'
    origin: 'bottom',

    // Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
    distance: '0px',

    // Time in milliseconds.
    duration: 1000,
    delay: 0,

    // Starting angles in degrees, will transition from these values to 0 in all axes.
    rotate: {
      x: 0,
      y: 0,
      z: 0
    },

    // Starting opacity value, before transitioning to the computed opacity.
    opacity: 1,

    // Starting scale value, will transition from this value to 1
    scale: 1,

    // true:  reveals occur every time elements become visible
    // false: reveals occur once as elements become visible
    reset: false,

    // Change when an element is considered in the viewport. The default value
    // of 0.20 means 20% of an element must be visible for its reveal to occur.
    viewFactor: 0.0,

    // Callbacks that fire for each triggered element reveal, and reset.
    beforeReveal: function(domEl) {},
    beforeReset: function(domEl) {},

    // Callbacks that fire for each completed element reveal, and reset.
    afterReveal: function(domEl) {animateHeight(domEl)},
    afterReset: function(domEl) {}
  };
  sr.reveal('.tml-line', config, 3000);

  function animateHeight(domEl) {
    var height = $(domEl).height();
    $(domEl).css("border-left", "1px solid #cf1e27");
    $(domEl).height(0);
    $(domEl).children('.tml-content').addClass("fg-timeline-active");
    $(".tml-line").animate({
      height: height
    }, 2000, function() {
      $(domEl).find('h2').animate({"opacity": 1}, 1000);
      $(domEl).find('p').animate({"opacity": 1}, 1000);
    });
  }
});

.filler {
  height: 1200px;
  width: 100%;
  background-color: azure;
}

.timeline {
  height: 100%;
  margin: 16px auto;
  margin: 1rem auto;
  border-radius: 1rem;
  padding: 32px 24px;
  padding: 2rem 1.5rem;
  overflow: visible !important;
}

.timeline .tml-content {
  -webkit-transform: translate(0, -2rem);
  -ms-transform: translate(0, -2rem);
  transform: translate(0, -2rem);
  padding: 24px;
  padding: 1.5rem;
  overflow: visible !important;
}

.timeline .tml-content.fg-timeline-active:before {
    content: "";
    width: 8px;
    width: 0.5rem;
    height: 8px;
    height: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    border: 4px solid #cf1e27;
    position: absolute;
    -webkit-transform: translate(-2rem, 0.5rem);
    -ms-transform: translate(-2rem, 0.5rem);
    transform: translate(-2rem, 0.5rem);
    z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal@3.3.2/dist/scrollreveal.min.js"></script>
<div class="filler">

</div>
<div class="timeline">
  <div id="test" class="tml-line">
    <div class="tml-content">
      <h2>1900</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>1900 - 2000</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>2001</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>2002</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>2003</h2>
      <p>Sample text...</p>
    </div>
  </div>
</div>

Answer

You can probably answer your own question but I’m posting an answer anyway. As you saw all you need is to set the overflow style to the tml-line class.

.tml-line {
   overflow: visible !important;
}