Can I target ::before ::after states?

Author Posts

sakomicro November 29, 2021 at 1:23 am

Hi!

I remember there has been a state selector in the previous version. where can I find that one? I only see normal hover and focus states, but I want to (for example) edit the ::before and ::after states.

And why are those states not displayed in the instepctor? That way its impossible to taregt them without knowing there are states by using the browser inspector.

Thanks!

Sascha

Sebastian November 29, 2021 at 11:52 am

Hey Sascha,

In answer to your questions:

  1. The option to add ::before and ::after hasn’t changed from previous versions. Click the cog icon to the right of the selector code field in the top toolbar.
  2. You are absolutely right that ::before and ::after should be included in the new feature to create selector variations. I will add those soon.
  3. You are also right that the HTML pane should show ::before and ::after elements. Technically, it’s a bit trickier than showing the regular HTML elements. But possible I think. I will review that again.

Cheers,
Sebastian

sakomicro November 29, 2021 at 5:06 pm

Hi Sebastian,

first: Thanks again for your amazing tool and the even more amazing Support!

To your answers I only have one additional question:

When does this cog icon appear and when not. I can see it when I create a completly new selector. But somehow I can not invoke it when updating an old selector.

Thanks!

Sascha

Sebastian November 29, 2021 at 8:18 pm

Hey Sascha,

You’re welcome!

For an existing selector, click the “Retarget selector” icon (cursor icon in a box) in the top toolbar to bring back the editing options, including the code for CSS modifiers. In that mode, selecting elements in the page will update the targeting too.

Cheers,
Sebastian

sakomicro November 29, 2021 at 8:36 pm

Brilliant! Makes total sense!

You must login or register to reply to this topic.