如何使用javascript以编程方式修改css:：before和:：after

我已经为一个气泡生成了这个CSS

我想做的是，将这个气泡用于不同长度和图像的不同文本（显示气泡的不同方式）

据我所知，我想修改.bubble中的“宽度”和“高度”，以及bubble:：before和bubble:：after中的“左”

但是当我得到元素的时候

var bubbleElem = document.getElementById('bubble-element-id');
bubbleElem.style.??

我不知道如何访问伪元素：：before和：：after

我也试过：

bubbleElem.shadowRoot
null
bubbleElem.childNodes
[]
bubbleElem.children
[]
bubbleElem.innerHTML
""
bubbleElem.hasAttribute('::before')
false
bubbleElem.prefix
null

如果能够轻松修改气泡的尺寸和小三角形的位置，那就太好了

谢谢大家!

更新：

我忘了告诉你我不想要JQuery的解决方案。 但是，我已经找到了解决问题的办法

    .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;
    }

使用如下HTML：

                <div id="info-bubble" class="bubble">
                    <div class="before"></div>
                    <div class="after"></div>
                </div>

---

：before和：after元素实际上不是dom的一部分，因此您不能这样做，可能需要一种不同的方法。请参阅和

下面的JavaScript解决方案：

                <div id="info-bubble" class="bubble">
                    <div class="before"></div>
                    <div class="after"></div>
                </div>

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