Pseudo element "after" not working

[bigardone]

Hi! First of all thanks for your hard work on this awesome library 🙌 I'm trying to add styles to an ::after pseudo-element, but I can't make it work. I have set up a demo in Ellie of what I'm trying to achieve:

https://ellie-app.com/4RL6hKGYpjJa1

In the demo you can find two different lists, one styled with plain CSS and the other using elm-css:

As you can see, I'm adding a separator between the list elements using the pseudo-element after and setting its content to |. I have tried to replicate the same with elm-css with no luck:

liCss : List Css.Style
liCss =
    [ Css.display Css.inlineBlock
    , Css.marginRight <| Css.rem 1
    , Css.textTransform Css.uppercase
    , Css.after
        [ Css.marginLeft <| Css.rem 1
        , Css.property "content" "|"
        ]
    ]

In fact, using chrome's inspector, there are no ::after elements at all:

Whereas in the plain CSS version there are:

Is there anything I'm doing wrong? Thanks in advance!

[sporto]

I think this is because the content property is invalid. It renders as content: |. Which then the browser ignores.

It needs to be

Css.property "content" "\"|\""

So it compiles as content: "|"