之前和之后的伪元素在顺风 CSS 中不起作用

Posted 2023-02-22

【中文标题】之前和之后的伪元素在顺风 CSS 中不起作用

【英文标题】：Before and after pseudo elements not working in tailwind CSS

【发布时间】：2021-08-06 20:37:15

【问题描述】：

我正在使用 Tailwind 在我的 NextJS 项目中提供的排版插件。

它在code 标记内显示内容，周围带有反引号。我正在尝试删除这些反引号。所以我在 globals.css 文件中尝试了.prose code::before content: "";，但它没有效果。当我从 Firefox 样式编辑器更改它时它可以工作。

任何想法为什么它不起作用？

/* globals.css inside NextJS Project */
.prose code::before 
  content: "";


.prose code::after 
  content: "";

【问题讨论】：

您需要发布使用 CSS 的 html。由于您使用的是 tailwind，因此您应该考虑在 Next 中启用 sass，以便您可以在 css 文件中使用 tailwind 以保持一致。

【参考方案1】：

使用!important，这对我有用。

/* app.css */
.prose code::before 
    content: "" !important;


.prose code::after 
    content: "" !important;

【讨论】：

虽然这可行，但我建议将其作为最后的选择。尝试通过添加一个父类/节点或覆盖声明的顺序来增加特异性。

【参考方案2】：

您可以在不涉及 CSS 文件的情况下执行此操作。

只需在tailwind.config.js中添加一些自定义代码：

// tailwind.config.js
module.exports = 
  theme: 
    extend: 
      typography: 
        DEFAULT: 
          css: 
            code: 
              '&::before': 
                content: 'none !important',
              ,
              '&::after': 
                content: 'none !important',
              ,
            ,
          ,
        ,
      
    ,
  ,
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],