0

I'm trying to define some style on the :before pseudo-element of a custom element host. I've been trying variations around the sample below, but nothing seems to work and I can't find information about it. Is that possible at all? If so, what am I doing wrong?

  :host(.open):before{
    background: grey;
    opacity:.4;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
  }

Here's a fiddle to show the issue: https://jsfiddle.net/8uzjb7ew/ . The custom element should have greyish background, but the :before pseudoelement is not rendered.

Antoine
  • 5,055
  • 11
  • 54
  • 82
  • Please show a snippet we can run and which includes the creation of the custom element. – A Haworth Jun 21 '22 at 08:46
  • @dippas it's not a duplicate question if you actually compare wiht one that you specified. There it's not even remotely about combining `::part` with other pseudo-element, but going deeper. – vintprox Dec 04 '22 at 17:40
  • @Antoine, I can't answer this question now, even though it's clearly not a duplicate. But it looks like your example above is not valid because it does not contain a content property, and your fiddle has a missing semicolon after the content. Without the content property pseudo elements are not rendered. https://jsfiddle.net/dxvju821/ – Shannon Poole Feb 07 '23 at 23:47

1 Answers1

0

I'm not sure about specific :host() pseudo element, but you can combine pseudo elements.

div:target{
  background-color:orange;
}
div:before{
  content:"*";
}
div:not(#D):target:before{
  content:"Targeted, not DEF - ";
}
<a href="#A">To ABD</a>
<a href="#D">To DEF</a>
<a href="#G">To GHI</a>

<div id="A">ABC</div>
<div id="D">DEF</div>
<div id="G">GHI</div>
Cédric
  • 2,239
  • 3
  • 10
  • 28