Prevent content-none from being overridden when conditionally styling ::before/::after (#13187)

* Prevent content-none from being overridden when conditionally styling before/after

* Update changelog

* Fix changelog entry

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure `scale-*` utilities support percentage values ([#13182](https://github.com/tailwindlabs/tailwindcss/pull/13182))
+- Prevent `content-none` from being overridden when conditionally styling `::before`/`::after` ([#13187](https://github.com/tailwindlabs/tailwindcss/pull/13187))
 
 ### Changed
 

packages/tailwindcss/src/utilities.ts

@@ -3430,7 +3430,10 @@ export function createUtilities(theme: Theme) {
     handle: (value) => [decl('will-change', value)],
   })
 
-  staticUtility('content-none', [['content', 'none']])
+  staticUtility('content-none', [
+    ['--tw-content', 'none'],
+    ['content', 'none'],
+  ])
   functionalUtility('content', {
     themeKeys: [],
     handle: (value) => [

packages/tailwindcss/tests/ui.spec.ts

@@ -233,6 +233,20 @@ test('scale can be a number or percentage', async ({ page }) => {
   expect(await getPropertyValue('#x', 'scale')).toEqual('1.5')
 })
 
+// https://github.com/tailwindlabs/tailwindcss/issues/13185
+test('content-none persists when conditionally styling a pseudo-element', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`<div id="x" class="after:content-none after:hover:underline">Hello world</div>`,
+  )
+
+  expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
+})
+
 // ---
 
 const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')