How to use javascript or jquery to modify a :before psedo-element attribute?

Question

I am trying to modify the "left" attribute of a pseudo-element :before. I am having no trouble modifying any other elements using either JavaScript or jQuery, but seem to be stuck when trying to modify an element in the :before tab.

By way of example, I cant seem to set the left attribute of the :before element below to 200.

My css:

#buttonBox {
    position: absolute;
    width:150px;
    z-index:10;
    left:298px;
    top: 130px;
}

#buttonBox:before {
    position: absolute;
    content: "";
    top: -8px;
    left: 80px;
    margin-left: -8px;  
    border-bottom: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-top: 0;
    border-bottom-color: #1e2227; 
}

In javascript:

document.getElementById("#buttonBox:before")

yields null, making it impossible to set that.

jQuery:

$("#buttonBox:before").offset({top: -8, left: 200});

is similarly unresponsive in setting the left attribute.

Is there something I am missing on how to modify attributes of pseudo-elements? I'm not having any luck Googling this one.

http://stackoverflow.com/questions/5814810/target-before-and-after-pseudo-elements-with-jquery, http://stackoverflow.com/questions/5347690/select-after-pseudo-class-element, http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery — RightSaidFred, Nov 28 '11 at 17:47

score 1 · Answer 1 · answered Nov 28 '11 at 17:45

1

You can't modify pseudo-elements with JQuery. Use classes to manipulate their CSS attributes instead. Example:

#buttonBox.active:before {
   top: -8px;        
   left: 200px;
}

The .active class would be applied via Javascript when necessary.

answered Nov 28 '11 at 17:45

Nate B

6,338
25
23

Understood. A followup, the :before element creates a little carat on top of my box which contains a list that is of variable width. I wanted to place the carat directly in the middle of the top of that box. With something like: $("#origins:before").offset({top: -8, left: $("#origins").width()/2}). As I understand it, that would be impossible to do in either javascript or jquery as to use classes you would have to know in advance what value for "left" you were going to set. Correct? – Andrew L Nov 28 '11 at 18:07
Clarification. If in the middle the it would be an easy left: 50%. But I also need to be able to place on the sides if I am clicking on an object near the sides of the screen. I've pretty much determined it is not possible to do this without taking the :before element out and making it is a sibling. Thanks for the help! =) – Andrew L Nov 28 '11 at 18:22
Yea, you're right. If there is some logic in there to calculate (side versus top), then it's trickier. However, you could have two classes to apply: `.top` and `.side`. Each would modify the `:before` element and switch the position. This way, the logic stays in the Javascript while the display stays in the CSS. – Nate B Nov 28 '11 at 18:25

score 1 · Answer 2 · answered Nov 28 '11 at 18:15

You can modify :before and :after via JS, but it's annoying enough that you probably shouldn't.

To do it, you'd need to use an identical selector and manually add a new style element to the head of the webpage containing the new styles:

$('<style type="text/css">#buttonBox:before { left: 200px; top: -8px; }</style>').appendTo('head');

Pseudo-elements aren't actually DOM elements (hence the "pseudo"). They don't exist in a way that JavaScript can access beyond adding/removing stylesheets.

score -1 · Answer 3 · edited Nov 28 '11 at 21:15

-1

Maybe you could use the prev() function in jQuery?

http://api.jquery.com/prev/

edited Nov 28 '11 at 21:15

Neemajn31

17
4

answered Nov 28 '11 at 17:50

Zencode.dk

1,374
1
8
12

How to use javascript or jquery to modify a :before psedo-element attribute?

3 Answers3