4

i want to change below :before css pseudo element's top value via javascript or jQuery dynamically ... how can i do it?

#buble{

height:70px;
width:980px;
background-color:#bce5a5;
display:none;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0px 0px 4px #dadada;
text-indent:35px;
color:#4a8f44;
font-weight:bold;
font-size:14pt;

       }

#buble:before{

content:"";           
display:block;
position:absolute;
top:77px; /* value = - border-top-width - border-bottom-width */
left:555px; /* controls horizontal position */
border-width:11px 7px 0px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#bce5a5 transparent;
width:0;
height:0;
}
Improve this question
3
  • stackoverflow.com/questions/7164709/… Commented Apr 10, 2014 at 4:08
  • 1
    Simple answer you can't but there are workarounds Commented Apr 10, 2014 at 4:09
  • @user3509090 What is value it would be set to ? From 77px to what value ? Thanks Commented Apr 10, 2014 at 6:11

2 Answers 2

Reset to default
1

As per my knowledge you can not modify pseudo style directly, but you can insert the CSS to the head portion of the DOM by this way,

jQuery

$( "div" ).click(function() {

  $('<style>p:before{top:10px}</style>').appendTo('head');

});

Check this Demo jsFiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

didn't you see my answer?
@ C-link i saw..thank you so much , spend your valuable time for answer my question
0

With jQuery you need to append style in the head:

$('<style>#buble:before{top: 50px}</style>').appendTo('head');

see more

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.