【问题标题】：I want to add pseudo-element like before and after in tailwindcss but it's not showing?我想在tailwindcss中添加之前和之后的伪元素，但它没有显示？
【发布时间】：2022-01-24 23:05:49
【问题描述】：

我想在tailwindcss中添加伪元素，比如before和after，但是YouTube上没有教程视频，所以我尝试阅读 tailwindcss 官方文档，但它不起作用。我做了和tailwindcss doc中写的一样的事情。

我的 HTML 和顺风 CSS 标记。

        <p
            class="
              text-white
              after:content-['OUTLAW DOT OG'] after:ml-0.5 after:text-red-500
            "
          >
            OUTLAW DOT OG
          </p>

我的 package.json 文件

{
  "name": "project-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx tailwindcss -i ./src/tailwind.css -o ./public/style.css -w",
    "build-p" : "postcss ./src/tailwind.css -o ./public/style.css -w" 

  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.6"
  }
}

【问题讨论】：

标签： html css tailwind-css postcss tailwind-in-js

【解决方案1】：

您必须使用下划线_ 而不是空格：

<p class="text-white after:content-['OUTLAW_DOT_OG'] after:ml-0.5 after:text-red-500">
  OUTLAW DOT OG
</p>

请注意，如果您想使用下划线，您可以使用反斜杠对其进行转义：\_

【讨论】：

感谢和抱歉迟到的回复