title: How to modify programmatically with javascript the css ::before and ::after
body: <p>I've generated this CSS for a bubble from <a href="http://www.ilikepixels.co.uk/drop/bubbler/" rel="nofollow">http://www.ilikepixels.co.uk/drop/bubbler/</a></p>
  
  <pre><code>    .bubble
      {
          position: relative;
          width: 250px;
          height: 120px;
          padding: 0px;
          background: #FFFFFF;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          border: #70CAF3 solid 2px;
      }
  
      .bubble:after
      {
          content: '';
          position: absolute;
          border-style: solid;
          border-width: 15px 15px 0;
          border-color: #FFFFFF transparent;
          display: block;
          width: 0;
          z-index: 1;
          bottom: -15px;
          left: 110px;
      }
  
      .bubble:before
      {
          content: '';
          position: absolute;
          border-style: solid;
          border-width: 16px 16px 0;
          border-color: #70CAF3 transparent;
          display: block;
          width: 0;
          z-index: 0;
          bottom: -18px;
          left: 109px;
      }
  </code></pre>
  
  <p>What I'd like to do, is to use this bubble for several different texts with different lengths and images (different ways of showing the bubble).</p>
  
  <p>From what I understand, I want to modify the "width" and "height" from .bubble and the "left" from bubble::before and bubble::after.</p>
  
  <p>But when I got the element</p>
  
  <pre><code>var bubbleElem = document.getElementById('bubble-element-id');
  bubbleElem.style.??
  </code></pre>
  
  <p>I don't know how to access the pseudo-element ::before and ::after </p>
  
  <p>I have tried this too:</p>
  
  <pre><code>bubbleElem.shadowRoot
  null
  bubbleElem.childNodes
  []
  bubbleElem.children
  []
  bubbleElem.innerHTML
  ""
  bubbleElem.hasAttribute('::before')
  false
  bubbleElem.prefix
  null
  </code></pre>
  
  <p>It'd be great to be able to easily modify the bubble's dimensions and position of the little triangle.</p>
  
  <p>Thank you!</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I forgot to tell that I didn't want a solution with JQuery.
  But, I've found the solution for my problem. </p>
  
  <pre><code>    .bubble
      {
          position: relative;
          width: 250px;
          height: 120px;
          padding: 0px;
          background: #FFFFFF;
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          border: #70CAF3 solid 2px;
      }
  
      .bubble .after
      {
          content: '';
          position: absolute;
          border-style: solid;
          border-width: 15px 15px 0;
          border-color: #FFFFFF transparent;
          display: block;
          width: 0;
          z-index: 1;
          bottom: -15px;
          left: 110px;
      }
  
      .bubble .before
      {
          content: '';
          position: absolute;
          border-style: solid;
          border-width: 16px 16px 0;
          border-color: #70CAF3 transparent;
          display: block;
          width: 0;
          z-index: 0;
          bottom: -18px;
          left: 109px;
      }
  </code></pre>
  
  <p>With the HTML like this:</p>
  
  <pre><code>                &lt;div id="info-bubble" class="bubble"&gt;
                      &lt;div class="before"&gt;&lt;/div&gt;
                      &lt;div class="after"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Now I can modify the .before element and the .after element, since it's no more a pseudo-element and is now a real element.</p>
  
  <pre><code>var bubbleElem = document.getElementById('info-bubble');
  var bubbleBefore = bubbleElem.children[0];
  var bubbleAfter = bubbleElem.children[1];
  
  bubbleElem.style.width = '10px'; // works
  bubbleElem.style.height = '10px'; // works
  bubbleBefore.style.left = '10px'; // works
  bubbleAfter.style.left = '10px'; // works
  </code></pre>