html - 我想在tailwindcss中添加之前和之后的伪元素，但它没有显示？

Question

我想在tailwindcss中添加之前和之后的伪元素但是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"
  }
}

Answer 1

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

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

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