gpt4 book ai didi

reactjs - 顺风 CSS :before pseudo class

转载 作者:行者123 更新时间:2023-12-04 13:14:12 24 4
gpt4 key购买 nike

我现在一直在循环工作,试图了解正在发生的事情。我正在使用带有 Tailwind 的故事书制作设计库。我似乎无法让 :before 伪类工作。无论我将它放在样式中的哪个位置,它都不会被渲染。

一个例子是,我正在尝试制作一个使用 react-slick 的组件,并希望设置导航样式:

'& .slick-dots': {
bottom: -30,
display: 'block',
left: 4,
listStyle: 'none',
margin: 0,
padding: 0,
position: 'absolute',
textAlign: 'center',
width: '100%',

'& li': {
cursor: 'pointer',
display: 'inline-block',
height: 20,
margin: '0 5px',
padding: 0,
position: 'relative',
width: 20,

'& button': {
border: 0,
background: 'transparent',
display: 'block',
height: 20,
width: 20,
outline: 'none',
lineHeight: 0,
fontSize: 0,
color: 'transparent',
padding: 5,
cursor: 'pointer',

'&:before': {
position: 'absolute',
top: 0,
left: 0,
content: '',
width: 20,
height: 20,
fontFamily: 'sans-serif',
fontSize: 20,
lineHeight: 20,
textAlign: 'center',
color: '#000000',
opacity: 0.75,
display: 'inline-block',
},
},
},
},

最佳答案

发现问题了。 :before 伪类不会渲染,除非有内容,但在 js 中的 css 的情况下,内容需要看起来像这样 content: '"text"',而不是 content: 'text',

关于reactjs - 顺风 CSS :before pseudo class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62037968/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com