英文:
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: "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.
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 = { /* ... */
"&::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.
答案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: "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>
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论