Tailwind CSS：伪类之前

Posted 2023-02-19

【中文标题】Tailwind CSS：伪类之前

【英文标题】：Tailwind CSS :before pseudo class

【发布时间】：2020-09-14 04:34:05

【问题描述】：

我现在一直在兜圈子，试图了解正在发生的事情。我正在使用带有 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',
      ,
    ,
  ,
,

【问题讨论】：

你能显示代码截图或沙箱（jsfiddle，codepen）吗？

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

【参考方案1】：

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

【参考方案2】：

要让 :before 类工作，您必须使用 tailwindcss-pseudo-elements 包来自定义您的伪元素。检查下面的文档

https://www.npmjs.com/package/tailwindcss-pseudo-elements