CSS ::After Pseudo-element, Button won't work

Community Usage questions
1

Hi,

I’m trying to create a nice gradient & bas64 icon (with filter invert) using CSS. The CSS works perfectly however, when using the Psuedo-element “::after”, the button won’t work anymore and is unclickable. Are Psuedo-elements allowed? Here is a pic of my button with how it should look along with my current CSS code for the following button.

image

:host {
  background: linear-gradient(rgb(32, 56, 71), rgb(13, 135, 199)) top left / cover no-repeat;
  background-color: rgb(13, 135, 199);
  /* Incase Gradient Fails */
  border-radius: 10px;
  width: 50vw;
  height: 50vw;
  position: relative;
}

:host::after {
  filter: invert(1);
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0iTTI0IDEydjZsOC04LTgtOHY2Yy04Ljg0IDAtMTYgNy4xNi0xNiAxNiAwIDMuMTQuOTIgNi4wNSAyLjQ4IDguNTJsMi45Mi0yLjkyYy0uODktMS42Ny0xLjQtMy41Ny0xLjQtNS42IDAtNi42MyA1LjM3LTEyIDEyLTEyem0xMy41MiAzLjQ4bC0yLjkyIDIuOTJjLjg5IDEuNjcgMS40IDMuNTcgMS40IDUuNiAwIDYuNjMtNS4zNyAxMi0xMiAxMnYtNmwtOCA4IDggOHYtNmM4Ljg0IDAgMTYtNy4xNiAxNi0xNiAwLTMuMTQtLjkyLTYuMDUtMi40OC04LjUyeiIvPjxwYXRoIGQ9Ik0wIDBoNDh2NDhoLTQ4eiIgZmlsbD0ibm9uZSIvPgoJCgkKCTxtZXRhZGF0YT4KCQk8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnJkZnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvMDEvcmRmLXNjaGVtYSMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CgkJCTxyZGY6RGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9IlVwZGF0ZSwgQXV0b3JlbmV3LCBSZWZyZXNoLCBSZWxvYWQiIGRjOmRlc2NyaXB0aW9uPSJVcGRhdGUsIEF1dG9yZW5ldywgUmVmcmVzaCwgUmVsb2FkIiBkYzpwdWJsaXNoZXI9Ikljb25zY291dCIgZGM6ZGF0ZT0iMjAxNi0xMi0xNCIgZGM6Zm9ybWF0PSJpbWFnZS9zdmcreG1sIiBkYzpsYW5ndWFnZT0iZW4iPgoJCQkJPGRjOmNyZWF0b3I+CgkJCQkJPHJkZjpCYWc+CgkJCQkJCTxyZGY6bGk+R29vZ2xlIEluYy48L3JkZjpsaT4KCQkJCQk8L3JkZjpCYWc+CgkJCQk8L2RjOmNyZWF0b3I+CgkJCTwvcmRmOkRlc2NyaXB0aW9uPgoJCTwvcmRmOlJERj4KICAgIDwvbWV0YWRhdGE+PC9zdmc+Cg==')  no-repeat  center 15% / 35%
}

.label {
  align-items:flex-end;
  /* adjust the following */
  padding-bottom: 0em;
  font-size:75%;
  color: white;
}
2

Pseudo-elements are likely to be already used, in this case :host:after is used when the widget is selected for edition. You should be able to use .label:after and .label:before however.

1 Like
3

.label:before or .label:after both worked. However, there is a bug which I’m not sure why this happens.

When I create a new button or CSS code, I have to remove from .label:before the position: absolute; and place it back in order for the icon to register its position properly.

Not sure if my code is whacky or its a bug, or sometimes stuff just happens haha.

Here is a gif below showing what I mean.

Here is my code for the button

:host {
  background: linear-gradient(white, white) top left / cover no-repeat;
  background-color: white;
  /* Incase Gradient Fails */
  border-radius: 10px;
  width: 50vw;
  height: 50vw;
  position: relative;
}

.label {
  align-items:flex-end;
  /* adjust the following */
  padding-bottom: 0em;
  font-size:75%;
  color: black;
}

.label:after{
  /*filter: invert(1);*/
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
 position: absolute;
  background: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTW91c2VfcG9pbnRlciIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTEwLjg2IDExLjk5NWwyLjUyNSA2LjA4TDExLjE3IDE5bC0yLjUyNS02LjA1TDUgMTYuNjI1VjEuMWwxMC45NDYgMTAuODg4LTUuMDg2LjAwNnoiLz48bWV0YWRhdGE+PHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpyZGZzPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwLzAxL3JkZi1zY2hlbWEjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPjxyZGY6RGVzY3JpcHRpb24gYWJvdXQ9Imh0dHBzOi8vaWNvbnNjb3V0LmNvbS9sZWdhbCNsaWNlbnNlcyIgZGM6dGl0bGU9Im1vdXNlLHBvaW50ZXIiIGRjOmRlc2NyaXB0aW9uPSJtb3VzZSxwb2ludGVyIiBkYzpwdWJsaXNoZXI9Ikljb25zY291dCIgZGM6ZGF0ZT0iMjAxNy0wOS0xNCIgZGM6Zm9ybWF0PSJpbWFnZS9zdmcreG1sIiBkYzpsYW5ndWFnZT0iZW4iPjxkYzpjcmVhdG9yPjxyZGY6QmFnPjxyZGY6bGk+RGFuaWVsIEJydWNlPC9yZGY6bGk+PC9yZGY6QmFnPjwvZGM6Y3JlYXRvcj48L3JkZjpEZXNjcmlwdGlvbj48L3JkZjpSREY+PC9tZXRhZGF0YT48L3N2Zz4=')  no-repeat  center 15% / 35%
}

Edit: It will also reoccur when I switch tabs in the host OSC (not in the server-side). I’m imagining it must be the order of which things are loading or being recalled.

4

It looks like a chromium bug, it doesn’t seem to occur with a recent instance of chrome. It might get fixed in the built-in GUI when engine will be updated in a future version.

1 Like