# CSS pseudo-elements **URL:** \ **Category:** Ignition Early Access\ **Tags:** perspective\ **Created:** [May 21, 2020, 7:21pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953 "2020-05-21T19:21:24Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [May 21, 2020, 7:21pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/1 "2020-05-21T19:21:24Z")
I’ve been playing around with some css animation For example I have a rectangle representing a device. There will be multiple of these in a room. If the device goes into an error state the box shadow flashes red. User can then click on the device to open a new view to interact with the device. I also have a settings icon come into screen if the user holds down the mouse. ![CSS animation](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/6e5a90c2630f8a7cc360a5c66fd51dfa63f04560.gif) The blinking box shadow comes from custom CSS ```auto @keyframes flashbox { 0% {box-shadow: 0px 0px 2px 1px rgba(255,0,0,0.4),0px 0px 12px 1px rgba(255,0,0,0.4) inset;} 70% {box-shadow: 0px 0px 6px 3px rgba(255,0,0,0.2),0px 0px 25px 2px rgba(255,0,0,0.2) inset;} 100% {box-shadow: 0px 0px 2px 1px rgba(255,0,0,0.3),0px 0px 12px 1px rgba(255,0,0,0.3) inset;} } ``` and adding an ‘animation’ to the style set to `flashbox 2s infinite` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/52f0f062cbfd332021b22a9367a9dd5e2e0fb37c.png) My question is… Is there a way to generate and access an elements ‘pseudo-element’ like ‘before’ or ‘after’, or am I just wasting my time? When I have several devices animating on the same screen at the same time the client PC uses a surprising amount of resources (GPU). I’ve read, in a number of places, that rendering a pseudo-element and and altering it’s opacity is a lot less resource intensive > **[How to animate box-shadow with silky smooth performance](https://tobiasahlin.com/blog/how-to-animate-box-shadow/)** > > Spoiler-alert: you don't. You use a pseudo-element. Is it possible to generate a pseudo-element in perspective utilizing a custom css file. I’ve tried, but I can’t seem to get it to work. I can easily get the example in the link working at [codepen.io](http://codepen.io) this is from chrome’s developer tools from my codepen example ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/f47e5408fa94580724303303f0e2f03c88f144b9.png) But if I try to do it in perspective and look at chromes developer tool, it doesn’t seem to generate the after pseudo element and the function is greyed out. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/80752f57d5ed8e567798f4335d06282eaa1dcb03.png) ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [May 21, 2020, 9:16pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/2 "2020-05-21T21:16:13Z")
Nevermind… I spent 2 days thinking about (and trying) this with no luck and finally posted something here. Than I magically found the answer. > You need to include a content to the pseudo-element for it to be generated. Learn something new everyday! ```auto .psc-lblAfter::after{ content: 'hello'; opacity: 1; box-shadow: 0 5px 15px rgba(200,0,0,1); } ``` This is what I wanted to see ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/bdccc65e1d3a89505ad2fdd2fb806e43a69b1347.png) It’s not pretty (yet) but it works!! ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/cbe0b00f027ed0c7380b17a4162028878ea4ada7.png) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [May 22, 2020, 1:59pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/3 "2020-05-22T13:59:34Z")
Hi Where did you put your @keyframes code in perspective? ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [May 22, 2020, 3:46pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/4 "2020-05-22T15:46:17Z")
It took me a little bit to figure out but it’s actually pretty simple. I just recently downloaded the 8.0.14 nightly (`b2020051802`) which has the theme updates so the css file structure is a little different. But same concept applies to earlier versions. Basically I created a new css file, lets call it “MyCSS.css” and placed it in the IA perspective themes folder ```auto C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes ``` I put my @keyframes into the new MyCSS.css file. Since I’m using the ‘light’ theme I made a copy of the existing light.css file and called it MyLight.css. Inside the MyLight.css file I added the line `@import "./MyCSS.css";` so that the contents of MyLight now looks like this ```auto @import "./MyCSS.css"; @import "./light/index.css"; ``` Now you just need to tell perspective to use the theme “MyLight”. Change the theme sesseion prop to ‘MyLight’ theme. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/7/70d5dd7da1f7db3ecb4fdc454cd7836ce748af21.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/d0681e851a919bd13c157c8dae63e9b838250724.png) Now, since your theme is MyLight it will import the new MyCSS.css file which contains your @keyframes Now, to run your animation you just need to add a value called ‘animation’ to the object and set the animate to the name of your @keyframe function. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5e55b2a9c88d92a1cd24fa6d51c68e45ab9e0737.png) I’ve been playing around with creating a new style class and applying it to objects so I can generate the pseudo elements and animate those. Applying a style class to an object, like a label, generates a unique class name that can be referenced for additional css coding. Seems to be working good so far. Side note - make sure you backup your css files. When I updated to 8.0.14 all of my css files were removed. Luckily I had backup copies and it wasn’t a big deal but I thought I’d share. I’m hoping that it just did it because of the significant theme changes. Hopefully going forward it will retain new files in the folder. If not I’ll throw out a request. Hope this helps… ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [May 22, 2020, 7:05pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/5 "2020-05-22T19:05:15Z")
Thanks, it help me a lot. It is been a year I request to put some sort of property for each object so I can put my case code. But nothing happen. If each object has its own css file the management of the obejct has much easier. The good thing now if you backup your project theme will be backup too with fonts. By the way how did you rotate the blue border in your second box? ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [May 22, 2020, 8:41pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/6 "2020-05-22T20:41:39Z")
I was really just playing around and I was using this as my inspiration. [https://codepen.io/Inderpreet23/pen/rLzbLk](https://codepen.io/Inderpreet23/pen/rLzbLk) In perspective I created a view with a CoordinateContainer (150wx150h) containing a label with a white background (144w x 144h postioned at x=3,y=3) and two smaller coordinate containers that can move behind the label. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/38584b23b774eb59c90021d026ba2565a763b5d7.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9f309c3a10bcceafd75461342b3dd7b6c187cc12.png) The two smaller containers inside the big one have gradient backgrounds ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/256b6cba1e27d1178e42b783aedd6f75aefe1cdd.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/ae015f8b6e9796eaec462c88bdad51c69870292c.png) I have the animation style binded to the check box property ```auto if({.../chkMove.props.selected},"moveV 1s linear infinite, moveH 1s infinite","") ``` The moveV and moveH functions are the css animation functions. ```auto @keyframes moveV { 0%,25%,100% {top: -25px;} 50%,75% {top: 125px;} } @keyframes moveH { 0%,75%,100% {left: -25px;} 25%,50% {left: 125px;} } ``` This may not be the best way to accomplish this but I was able to get it to do what I wanted. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [May 22, 2020, 11:51pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/7 "2020-05-22T23:51:01Z")
Interesting topic and ideas, thanks for posting! ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [May 23, 2020, 5:54am UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/8 "2020-05-23T05:54:31Z")
Thnaks. With this option I can do any things. it is time change the scroll bar with css. 😀 Make it narrow and more modern. Specially in table. There are some topic that can make scrollbars hidden while user can scroll with touch or mouse wheel. ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [May 26, 2020, 4:07pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/9 "2020-05-26T16:07:14Z")
I'm glad this was helpful. I'm looking forward to seeing some more of your projects > [@Project screenshots - share yours](http://forum.inductiveautomation.com/t/project-screenshots-share-yours/513/48): > > Iodine Production Plant with Vision: I try to combine High Performance HMI with modern UI. Still working on … ---
**Author:** ![CTavakoli](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@CTavakoli](https://forum.inductiveautomation.com/u/CTavakoli)\ **Post date:** [November 5, 2020, 2:25pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/10 "2020-11-05T14:25:18Z")
This was a very detailed and helpful thread. Thank you @dkylep for sharing your findings. Gave me idea to do the same with SVG and it worked well there too. ---
**Author:** ![CTavakoli](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@CTavakoli](https://forum.inductiveautomation.com/u/CTavakoli)\ **Post date:** [November 5, 2020, 2:47pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/11 "2020-11-05T14:47:34Z")
@dkylep, can you elaborate on this please: > [@dkylep](#): > > I’ve been playing around with creating a new style class and applying it to objects so I can generate the pseudo elements and animate those. Applying a style class to an object, like a label, generates a unique class name that can be referenced for additional css coding. Seems to be working good so far. ---
**Author:** ![CTavakoli](https://avatars.discourse-cdn.com/v4/letter/c/278dde/32.png) [@CTavakoli](https://forum.inductiveautomation.com/u/CTavakoli)\ **Post date:** [November 5, 2020, 4:32pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/12 "2020-11-05T16:32:35Z")
never mind please, I noticed the ‘.psc-…’ ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [November 5, 2020, 4:41pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/13 "2020-11-05T16:41:10Z")
> [@\[NEW\] Theming Update: Major Visual Changes in Perspective](http://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/52): > > Okay, well the reason you need to use the “.psc-” prefix is to avoid potential collision between Perspective Style Class names and classes that we supply by default. For example: I’m using a Button component and I want to create a Style that I think describes how this primary Button should look. I name this Style “ia\_button–primary”. In this case, if we hadn’t attached the “psc-” prefix to the style class, all primary Buttons would use your Style - instead of only the ones you apply that Styl… ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [December 9, 2021, 4:56pm UTC](https://forum.inductiveautomation.com/t/css-pseudo-elements/34953/14 "2021-12-09T16:56:54Z")
A post was split to a new topic: [How to implement a loading icon?](https://forum.inductiveautomation.com/t/how-to-implement-a-loading-icon/53950)