使用elm-css指定CSS内容属性

Question

使用elm-css，我想在before伪元素中指定content属性。

我翻译了

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: "×";
}

与

    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 "×" ]
            ]
        ]
        []

但是会产生一条错误消息：该content值不是一个函数，但是给了它1个参数。

我找不到“内容”的正确功能。

Answer 1

您可以像这样使用elm-css的property功能：

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

旁注：
该content函数用于flex-basis属性。查看更多规格。 https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#content