NO BUG: CSS Counter property not working in pseudo elements

Browser: Firefox
OS: Windows

CSS counters are not parsing correctly (on the front-end) in the pseudo element’s content field.

Name a counter number and try this:
content: "0 " counter(number)"";

It outputs as:
content: "0 counter(number)"


capture_134

Hi Khan,
Thanks so much for your report!

This is correct because the content field currently only accepts plain content and automatically wraps it in quotes if there is none. If there are several quote pairs, they are removed and added on the outside.

In general, the use of the counter in the pseudo-elements/classes input makes no sense, because it always targets the ID of the element and not the tag itself (e.g. h3, li, …), which you normally want to number consecutively.

Therefore, I would currently recommend you insert the counter via custom CSS because you are much more flexible that way. With the introduction of this feature it will certainly be possible to do more complex tasks through the UI.

Best regards,
timmse

1 Like

Thanks. Still, counters are used in pseudo elements for accent purposes. You can see that in a lot of modern websites. IMHO, a little rule to check whether quotes have been entered by the user would help in this. But it’s ok if it’s not on Bricks to-do list. I ended using the same pseudo element, only the content was fed via custom CSS :slight_smile:

As I said, the check for quotes already exists, just not as complex as your use case requires.
We will definitely have a look at this together with the feature request mentioned.

1 Like