:before 在 DOM 中如何渲染?

huangapple go评论67阅读模式
英文:

How do I make :before render in the DOM?

问题

I can't figure out how to make :before render in the DOM.

我不知道如何在 DOM 中呈现 :before。

I tried this:

我尝试了以下代码:

const inline = {
    backgroundColor: "yellow",
    width: "100px",
    height: "30px",
    display: "inline-block",
    position: "relative",
    "&::before": {
        content: '"Good Day"',
        position: "absolute",
        left: "-50px",
        top: "50px",
    },
}

return (
    <p style={style}>
        Lorem ipsum dolor sit amet, <i style={inline}></i>consectetur
        adipiscing elit, sed do<i style={inline}></i> eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        <i style={inline}></i>
    </p>
)

the styling of the i elements works as expected, except for the :before that is not rendered.

i 元素的样式按预期工作,除了 :before 不会被呈现。

Any tip on how t accomplish this would be much appreciated 🙌

对于如何实现这一点的任何提示将不胜感激 🙌

英文:

I can't figure out how to make :before render in the DOM.

I tried this:

const inline = {
    backgroundColor: &quot;yellow&quot;,
    width: &quot;100px&quot;,
    height: &quot;30px&quot;,
    display: &quot;inline-block&quot;,
    position: &quot;relative&quot;,
    &quot;&amp;::before&quot;: {
        content: &#39;&quot;Good Day&quot;&#39;,
        position: &quot;absolute&quot;,
        left: &quot;-50px&quot;,
        top: &quot;50px&quot;,
    },
}

return (
    &lt;p style={style}&gt;
        Lorem ipsum dolor sit amet, &lt;i style={inline}&gt;&lt;/i&gt;consectetur
        adipiscing elit, sed do&lt;i style={inline}&gt;&lt;/i&gt; eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        &lt;i style={inline}&gt;&lt;/i&gt;
    &lt;/p&gt;
)

the styling of the i elements works as expected, except for the :before that is not rendered.

Any tip on how t accomplish this would be much appreciated 🙌

答案1

得分: 1

const inline = { /* ... */
    "&::before": { /* ... */ },
}

The ampersand ("parent selector") is a part of SCSS/SASS/LESS, not the raw CSS properties that React can understand.

There is no syntax that allows ":before" applied as an inline style, as in this SO answer, nor through JavaScript manipulation as in this SO answer.

英文:
const inline = { /* ... */
    &quot;&amp;::before&quot;: { /* ... */ },
}

The ampersand ("parent selector") is a part of SCSS/SASS/LESS, not the raw CSS properties that React can understand.

There is no syntax that allows ":before" applied as an inline style, as in this SO answer, nor through JavaScript manipulation as in this SO answer.

答案2

得分: 1

内联CSS样式不支持伪元素(它们不是元素本身的一部分)。唯一将样式应用于伪元素的方法是使用CSS声明(例如:设置一个id并设置带有#id::before{ }的CSS声明)。

对于ReactJS组件,一种选项是使用类似于:before(或:after)伪元素的显式标签,将其添加到元素内容的开头或末尾。例如:

const inline = {
    backgroundColor: "yellow",
    width: "100px",
    height: "30px",
    display: "inline-block",
    position: "relative",
}

const before = {
    position: "absolute",
    left: "-50px",
    top: "50px",
}

return (
    <p style={style}>
        Lorem ipsum dolor sit amet, <i style={inline}></i>consectetur
        adipiscing elit, sed do<i style={inline}></i> eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        <i style={inline}><div style={before}>"Good Day"</div>Content</i>
    </p>
)
英文:

Inline css styles do not support pseudo elements (they are not part of the element itself). The only way to apply style to pseudo elements is using css declarations (eg: setting an id and setup a css declaration with #id::before{ }).

One option for reactjs components is to use an explicit tag that works like :before (or :after) pseudo element, adding it to the start or end of the element content. Eg:

const inline = {
    backgroundColor: &quot;yellow&quot;,
    width: &quot;100px&quot;,
    height: &quot;30px&quot;,
    display: &quot;inline-block&quot;,
    position: &quot;relative&quot;,
}

const before = {
        position: &quot;absolute&quot;,
        left: &quot;-50px&quot;,
        top: &quot;50px&quot;,
}

return (
    &lt;p style={style}&gt;
        Lorem ipsum dolor sit amet, &lt;i style={inline}&gt;&lt;/i&gt;consectetur
        adipiscing elit, sed do&lt;i style={inline}&gt;&lt;/i&gt; eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
        &lt;i style={inline}&gt;&lt;div style={before}&gt;&quot;Good Day&quot;&lt;/div&gt;Content&lt;/i&gt;
    &lt;/p&gt;
)

huangapple
  • 本文由 发表于 2023年3月31日 02:25:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/75891745.html
  • javascript
  • reactjs

在Nunjucks模板中访问数组在 :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定