How to modify programmatically with javascript the css ::before and ::after

Question

I've generated this CSS for a bubble from http://www.ilikepixels.co.uk/drop/bubbler/

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

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).

From what I understand, I want to modify the "width" and "height" from .bubble and the "left" from bubble::before and bubble::after.

But when I got the element

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

I don't know how to access the pseudo-element ::before and ::after

I have tried this too:

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

It'd be great to be able to easily modify the bubble's dimensions and position of the little triangle.

Thank you!

UPDATE:

I forgot to tell that I didn't want a solution with JQuery. But, I've found the solution for my problem.

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

With the HTML like this:

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

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.

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

Alleged vanilla JavaScript solution to this at the bottom of: http://stackoverflow.com/questions/3743513/how-do-i-access-style-properties-of-pseudo-elements-with-jquery — Kevin Boucher, Mar 11 '15 at 21:36

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

The :before and :after elements aren't really part of the dom, so you can't do this and will likely need a different approach. See Access the css ":after" selector with jQuery and Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

edited May 23 '17 at 11:43

Community

1
1

answered Mar 11 '15 at 21:36

Coburn Berry

262
1
8

How to modify programmatically with javascript the css ::before and ::after

1 Answers1

Linked