reactjs - Tailwind CSS:伪类之前
问题描述
我现在一直在兜圈子,试图了解正在发生的事情。我正在使用带有 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',
推荐阅读
- yaml - Jekyll/Liquid - 使用导航项目文件生成 (ul, li) 列表并根据页面前端获取项目的属性
- php - XPath 查找具有空值的属性
- angular - 我如何使用 async 和 await ?它不工作
- c - 使用指针算术更新值但不使用指针算术值的 C 递归函数
- python - 如何处理snakemake中的python版本/包冲突?
- .net-core - 有没有办法在 arm64 环境中运行 Avalonia 应用程序?
- python - Python 惰性枚举
- c++ - 旧 Visual Studio C++ 项目中的 RPL_Plugin
- flutter - 截图小部件在 Flutter 中剪辑我的列表视图
- html - 尝试使表格的内容和边界线居中时出现问题?