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)"
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)"
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
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
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.