title: How to use Javascript to change pseudo element contents?
body: <p>I'm making a timeline website for practice and am trying to automatically update the pseudo elements to show the year on the timeline. I know I could do this targeting each nth-child, but there must be an easier way to do this using Javascript? I want to grab each year from each event using ID "yearGrab". I've written a comment in the CSS to show which bit I want to get changed to save you reading it all. </p>
  
  <p>Please let me know using pure Javascript. Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Vardana';
  }
  
  body {
   background: linear-gradient(to right, rgba(10,20,38,.96), rgba(26,49,75,.94));
   height: 100%;
  }
  .container {
   height: 650px;
   overflow-y: scroll;
   font-size: 13px;
   cursor: grabbing;
  }
  
  #timelineList, li{
   width: max-content;
  }
  
  .timeline ul li {
    list-style-type: none;
    position: relative;
   display: table-cell;
   max-width: none;
  }
  
  .timeline ul#timelineList:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 4px;
   background: white;
   margin-top: 306px;
  }
  /*NEXT TWO BITS ARE THE TARGET TO CHANGE WITH JAVASCRIPT*/
  .timeline .EventOddDescription:after {
    content: '2019';
   color: white;
   text-shadow: 2px 2px 2px black;
   text-align: center;
   font-size: 17px;
    position: absolute;
    left: 56px;
    bottom: -43.5px;
   border: 1.8px solid white;
   background: linear-gradient(to right, rgba(10,20,38,.9), rgba(26,49,75,.7));
    transform: translateX(-50%);
    width: 70px;
    height: 20px;
    border-radius: 10%;
  }
  .timeline .EventEvenDescription:after {
    content: '';
   color: white;
   text-shadow: 2px 2px 2px black;
   text-align: center;
   font-size: 17px;
    position: absolute;
    left: 56px;
    top: 49px;
   border: 1.8px solid white;
   background: linear-gradient(to right, rgba(10,20,38,.9), rgba(26,49,75,.7));
    transform: translateX(-50%);
    width: 70px;
    height: 20px;
    border-radius: 10%;
  }
  
  .timeline .EventOddDescription:before {
    content: '';
    position: absolute;
    bottom: -14px;
   left: 42px;
   width: 0;
   height: 0;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-top: 14px solid white;
  }
  .timeline .EventEvenDescription:before {
   content: '';
    position: absolute;
    top: 80px;
   left: 42px;
   width: 0;
   height: 0;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 14px solid white;
  }
  
  .timeline ul li div {
   background: white;
   margin-top: 94px;
   margin-left: 30px;
   padding: 10px;
   border-radius: 10px;
   color: black;
   width: 500px;
   height: 200px;
   overflow: hidden;
   box-shadow: 3px 3px 18px black;
  }
  .Category1 {
   display: block;
   background: linear-gradient(to right, rgba(101,78,163, 1)30%, rgba(101,78,163, .6));
   padding: 4px;
   margin: -10px;
   padding-left: 10px;
   color: white;
   font-weight: 200;
  }
  .Category2 {
   display: block;
   background: linear-gradient(to right, rgba(255, 65, 108, 1) 30%, rgba(255, 65, 108, .6));
   padding: 4px;
   margin: -10px;
   padding-left: 10px;
   color: white;
   font-weight: 200;
  }
  .Category3 {
   display: block;
   background: linear-gradient(to right, rgba(253, 200, 48, 1)30%, rgba(253, 200, 48, .4));
   padding: 4px;
   margin: -10px;
   padding-left: 10px;
   color: white;
   font-weight: 200;
  }
  
  .timeline ul li:nth-child(odd) {
    top: -18px;
  }
  .timeline div:nth-child(odd) {
   margin-right: -265px;
  }
  .timeline ul li:nth-child(even) {
    top: 247px;
   left: -80px;
  }
  
  .EventOddDescription {
   display: flex;
   flex-direction: row;
  }
  
  .EventEvenDescription {
   display: flex;
   flex-direction: row;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang=“en”&gt;
    &lt;head&gt;
   &lt;title&gt;Dads Website&lt;/title&gt;
   &lt;link rel="stylesheet" href="stylesheet.css"&gt;
    &lt;script src="JavaScript.js" defer&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;header&gt;
            &lt;h1&gt;Pluto Timeline&lt;/h1&gt;
      &lt;/header&gt;
  
  &lt;section class="container"&gt;
    &lt;div class="timeline"&gt;
      &lt;ul id="timelineList"&gt;
        &lt;li class="Event1"&gt;
          &lt;div class="EventOddDescription"&gt;
            &lt;p&gt;&lt;span class="Category1"&gt;Category 1&lt;/span&gt;&lt;br&gt;
            &lt;strong&gt;Pluto Born&lt;/strong&gt;&lt;br&gt;
            &lt;strong class="Year"&gt;03rd April &lt;span id="yearGrab"&gt;2019&lt;/span&gt;&lt;/strong&gt;&lt;br&gt;
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;a href="Event2More"&gt;Read More&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="Event2"&gt;
          &lt;div class="EventEvenDescription"&gt;
            &lt;p&gt;&lt;span class="Category2"&gt;Category 2&lt;/span&gt;&lt;br&gt;
            &lt;strong&gt;Pluto's First Nap&lt;/strong&gt;&lt;br&gt;
            &lt;strong class="Year"&gt;30th May 2020&lt;/strong&gt;&lt;br&gt;
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            &lt;a href="Event2More"&gt;Read More&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/li&gt;
          &lt;li class="Event3"&gt;
            &lt;div class="EventOddDescription"&gt;
              &lt;p&gt;&lt;span class="Category3"&gt;Category 3&lt;/span&gt;&lt;br&gt;
              &lt;strong&gt;Pluto's Second Nap&lt;/strong&gt;&lt;br&gt;
              &lt;strong class="Year"&gt;03rd April 2020&lt;/strong&gt;&lt;br&gt;
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. &lt;a href="Event3More"&gt;Read More&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  
  
   &lt;/body&gt;
  
   &lt;footer class="footer"&gt;
   &lt;/footer&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>