Search code examples
elm

Specify CSS content property with elm-css

Using elm-css, I would like to specify the content property in a before pseudo-element

I translated 

div.boxclose{
    float:right;
    margin-top:-30px;
    margin-right:-30px;
    cursor:pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;       
}

.boxclose:before {
    content: "×";
}

with 

    div
        [ css
            [ float right
            , marginTop (px -30)
            , marginRight (px -30)
            , cursor pointer
            , color white
            , border3 (px 1) solid darkGrey2
            , borderRadius (px 30)
            , backgroundColor lightGrey
            , fontSize (px 31)
            , fontWeight bold
            , display inlineBlock
            , lineHeight (px 0)
            , padding2 (px 11) (px 3)
            , before [ content "×" ]
            ]
        ]
        []

but it produces an error message : The content value is not a function, but it was given 1 argument.

I did not find the right function for "content".

Solution

  • You can use the property function of elm-css like this:

    css [ before [ property "content" "'x'" ]]

    Side note:
    The content function is used for the flex-basis property. See more in the specs. https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#content