3

I have this class 

.progress {

    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}
.progress:after {

   position:absolute;
    background:black;
    top:0; bottom:0;
    left:0; 
    width:10%;
    -webkit-animation: filler 2s ease-in-out;
    -moz-animation: filler 2s ease-in-out;
    animation: filler 2s ease-in-out;
}

and have this div 

<div id="percentDIV" class="progress" runat="server">some text</div>

I want to change width attribute of progress:after class in c# dynamically. Is it possible?

something like?

percentDIV.Attributes["class:progress:after"] = "width:25%";
youngseagul
  • 347
  • 5
  • 16
  • possible duplicate of [Change the style of :before and :after pseudo-elements?](http://stackoverflow.com/questions/21032481/change-the-style-of-before-and-after-pseudo-elements) – Dylan Corriveau Nov 06 '14 at 17:49
  • @tnw: The OP wants to change the CSS class' value via C# no JS. Which means server-side, not client. That is VERY relevant! Adding C# tag back in. (Admittedly, the last line of the OP makes things very confusing.) – Paul Sasik Nov 06 '14 at 17:52
  • I totally missed that, my bad. Thanks Paul – tnw Nov 06 '14 at 17:53
  • Where is your style sheet? Is it in `Page` or in a `.css` file? Are you using `MVC` or `Web forms` ? – brz Nov 06 '14 at 18:17

2 Answers2

1

Declare your next div to runat="server" and change its style

  percentDiv.Attributes["style"] = "width:20%";

Styles has precedence over classes.

Another way is to remove your class declaration from the CSS and dynamically create it on your page header section with a runat="server" control, replacing its content with your css class created dynamically.

rodrigogq
  • 1,943
  • 1
  • 16
  • 25
  • Actually :after class is for animation to fill in percentage. Your suggestion changed parent class attributes. I want to change :after class. – youngseagul Nov 06 '14 at 18:14
  • You are right... well that begin so, I have a question: you need to change the width of next element of this element only or for all elements in the page that has the progress class? If it is just for the next element (and you can see it at design time), put a runat='server' on it and change its style! Otherwise, you could 'remove' this class from your stylesheet and insert one dynamically inside your page (declaring a runat='server' element at the page header). – rodrigogq Nov 06 '14 at 18:22
  • I have to put this class for all elements having progress class. Eventually they are divs and I have to bind progress in percentage with them which is coming from database server. – youngseagul Nov 06 '14 at 19:26
0
percentDIV.Attributes["style"] = "width:20%";
wblanks
  • 598
  • 10
  • 27