diff --git a/packages/preset-attributify/src/variant.ts b/packages/preset-attributify/src/variant.ts
index 00b8d7adb2..c10f11dbe9 100644
--- a/packages/preset-attributify/src/variant.ts
+++ b/packages/preset-attributify/src/variant.ts
@@ -2,7 +2,7 @@ import type { VariantObject } from '@unocss/core'
 import { isAttributifySelector } from '@unocss/core'
 import type { AttributifyOptions } from './types'
 
-export const variantsRE = /^(?!\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/
+export const variantsRE = /^(?!.*\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/
 
 export const variantAttributify = (options: AttributifyOptions = {}): VariantObject => {
   const prefix = options.prefix ?? 'un-'
diff --git a/packages/preset-mini/src/_rules/static.ts b/packages/preset-mini/src/_rules/static.ts
index 705eed53eb..1d8203ab73 100644
--- a/packages/preset-mini/src/_rules/static.ts
+++ b/packages/preset-mini/src/_rules/static.ts
@@ -69,8 +69,7 @@ export const contentVisibility: Rule[] = [
 ]
 
 export const contents: Rule[] = [
-  [/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
-  [/^content-(\$.+)]$/, ([, v]) => ({ content: h.cssvar(v) })],
+  [/^content-(.+)$/, ([, v]) => ({ content: h.bracket.cssvar(v) })],
   ['content-empty', { content: '""' }],
   ['content-none', { content: '""' }],
 ]
diff --git a/packages/preset-mini/src/_utils/handlers/handlers.ts b/packages/preset-mini/src/_utils/handlers/handlers.ts
index 16fa529265..914c687766 100644
--- a/packages/preset-mini/src/_utils/handlers/handlers.ts
+++ b/packages/preset-mini/src/_utils/handlers/handlers.ts
@@ -91,7 +91,7 @@ export function fraction(str: string) {
     return `${round(num * 100)}%`
 }
 
-const bracketTypeRe = /^\[(color|length|position|raw|string):/i
+const bracketTypeRe = /^\[(color|length|position|quoted|string):/i
 function bracketWithType(str: string, requiredType?: string) {
   if (str && str.startsWith('[') && str.endsWith(']')) {
     let base: string | undefined
@@ -125,13 +125,15 @@ function bracketWithType(str: string, requiredType?: string) {
       return
 
     switch (hintedType) {
-      case 'raw': return base
-
       case 'string': return base
         .replace(/(^|[^\\])_/g, '$1 ')
         .replace(/\\_/g, '_')
-        .replace(/(['\\])/g, '\\$1')
-        .replace(/^(.+)$/, '\'$1\'')
+
+      case 'quoted': return base
+        .replace(/(^|[^\\])_/g, '$1 ')
+        .replace(/\\_/g, '_')
+        .replace(/(["\\])/g, '\\$1')
+        .replace(/^(.+)$/, '"$1"')
     }
 
     return base
diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
index 0cb2b5c502..bd6f017a3e 100644
--- a/test/__snapshots__/preset-attributify.test.ts.snap
+++ b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -46,7 +46,7 @@ Set {
   "[translate-y-=\\"\\"]",
   "[%=\\"\\"]",
   "[rotate-30=\\"\\"]",
-  "[after~=\\"content-[unocss]\\"]",
+  "[after~=\\"content-[quoted:uno_css]\\"]",
   "[rotate-60=\\"\\"]",
   "[ma=\\"\\"]",
   "[m~=\\"1\\"]",
@@ -112,8 +112,8 @@ Set {
   "[peer-focus~=\\"scale-75\\"]",
   "[peer-focus~=\\"origin-top-left\\"]",
   "[peer-focus~=\\"text-green-500\\"]",
-  "[before~=\\"content-!\\"]",
-  "[after~=\\"content-[!]\\"]",
+  "[before-content~=\\"[quoted:!]\\"]",
+  "[after~=\\"content-[string:!]\\"]",
 }
 `;
 
@@ -151,7 +151,7 @@ Set {
   "[transform=\\"\\"]",
   "[translate-x-100=\\"\\"]",
   "[rotate-30=\\"\\"]",
-  "[after~=\\"content-[unocss]\\"]",
+  "[after~=\\"content-[quoted:uno-css]\\"]",
   "[rotate-60=\\"\\"]",
   "[ma=\\"\\"]",
   "[m~=\\"1\\"]",
@@ -202,7 +202,7 @@ exports[`attributify > fixture1 1`] = `
 [\\\\!leading-4=\\"\\"]{line-height:1rem !important;}
 [important~=\\"text-red\\"]{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
 [text~=\\"white\\"]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
-[after~=\\"content-\\\\[unocss\\\\]\\"]::after{content:\\"unocss\\";}
+[after~=\\"content-\\\\[quoted\\\\:uno_css\\\\]\\"]::after{content:\\"uno css\\";}
 @media (min-width: 640px){
 [sm~=\\"\\\\[color\\\\:red\\\\]\\"]{color:red;}
 }
@@ -264,7 +264,8 @@ exports[`attributify > fixture2 1`] = `
 [op-20=\\"\\"]{opacity:0.2;}
 [all\\\\:transition-400=\\"\\"] *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;}
 [transition~=\\"\\\\32 00\\"]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;}
-[after~=\\"content-\\\\[\\\\!\\\\]\\"]::after{content:\\"!\\";}
+[after~=\\"content-\\\\[string\\\\:\\\\!\\\\]\\"]::after{content:!;}
+[before-content~=\\"\\\\[quoted\\\\:\\\\!\\\\]\\"]::before{content:\\"!\\";}
 @media (min-width: 640px){
 [sm~=\\"bg-blue-600\\"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
 }"
@@ -307,7 +308,7 @@ exports[`attributify > fixture4 1`] = `
 [text~=\\"sm\\"]{font-size:0.875rem;line-height:1.25rem;}
 [important~=\\"text-red\\"]{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
 [text~=\\"white\\"]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
-[after~=\\"content-\\\\[unocss\\\\]\\"]::after{content:\\"unocss\\";}
+[after~=\\"content-\\\\[quoted\\\\:uno-css\\\\]\\"]::after{content:\\"uno-css\\";}
 @media (min-width: 640px){
 [sm~=\\"\\\\[color\\\\:red\\\\]\\"]{color:red;}
 }
@@ -365,7 +366,7 @@ exports[`attributify > variant 1`] = `
   "translate-y-",
   "%",
   "rotate-30",
-  "after-content-[unocss]",
+  "after-content-[quoted:uno_css]",
   "rotate-60",
   "ma",
   "m-1",
diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
index cc9ddfd057..172f745cd2 100644
--- a/test/__snapshots__/preset-mini.test.ts.snap
+++ b/test/__snapshots__/preset-mini.test.ts.snap
@@ -38,7 +38,6 @@ exports[`preset-mini > targets 1`] = `
 /* layer: 1 */
 .uno-layer-1\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 /* layer: default */
-.content-\\\\$unocss-var{align-content:var(--unocss-var);}
 .fw-\\\\$variable{font-weight:var(--variable);}
 .items-\\\\$size{align-items:var(--size);}
 .ws-\\\\$variable{white-space:var(--variable);}
@@ -295,11 +294,13 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
 .content-visibility-hidden{content-visibility:hidden;}
 .content-visibility-auto{content-visibility:auto;}
 .content-visibility-unset{content-visibility:unset;}
-.after\\\\:content-\\\\[unocss\\\\]::after,
-.content-\\\\[unocss\\\\]{content:\\"unocss\\";}
-.content-\\\\[\\\\!\\\\]{content:\\"!\\";}
-.content-\\\\[attr\\\\(dashed-attr\\\\)\\\\]{content:\\"attr(dashed-attr)\\";}
-.content-\\\\[attr\\\\(underlined_attr\\\\)\\\\]{content:\\"attr(underlined_attr)\\";}
+.after\\\\:content-\\\\[quoted\\\\:unocss\\\\]::after,
+.content-\\\\[quoted\\\\:unocss\\\\]{content:\\"unocss\\";}
+.content-\\\\[normal\\\\]{content:normal;}
+.content-\\\\[quoted\\\\:\\\\!\\\\]{content:\\"!\\";}
+.content-\\\\[string\\\\:attr\\\\(dashed-attr\\\\)\\\\]{content:attr(dashed-attr);}
+.content-\\\\[string\\\\:attr\\\\(underlined\\\\\\\\_attr\\\\)\\\\]{content:attr(underlined_attr);}
+.content-\\\\$unocss-var{content:var(--unocss-var);}
 .content-empty,
 .content-none{content:\\"\\";}
 .font-\\\\[system-ui\\\\]{font-family:system-ui;}
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
index 5aae9f8c50..97e49c1976 100644
--- a/test/assets/preset-mini-targets.ts
+++ b/test/assets/preset-mini-targets.ts
@@ -610,10 +610,11 @@ export const presetMiniTargets: string[] = [
   // content
   'content-empty',
   'content-none',
-  'content-[!]',
-  'content-[unocss]',
-  'content-[attr(dashed-attr)]',
-  'content-[attr(underlined_attr)]',
+  'content-[normal]',
+  'content-[quoted:!]',
+  'content-[quoted:unocss]',
+  'content-[string:attr(dashed-attr)]',
+  'content-[string:attr(underlined\\_attr)]',
   'content-$unocss-var',
 
   // content visibility
@@ -923,7 +924,7 @@ export const presetMiniTargets: string[] = [
 
   // variants - pseudo elements
   'before:translate-y-full',
-  'after:content-[unocss]',
+  'after:content-[quoted:unocss]',
   'placeholder-opacity-60',
   'placeholder-color-opacity-60',
   'placeholder-color-red-1',
diff --git a/test/handler.test.ts b/test/handler.test.ts
index 52df680c62..70181f9092 100644
--- a/test/handler.test.ts
+++ b/test/handler.test.ts
@@ -32,16 +32,15 @@ describe('value handler', () => {
     expect(h.bracket('[var(--A\\_B)]')).eql('var(--A_B)')
   })
 
-  it('bracket raw-type', () => {
-    expect(h.bracket('[raw:a b]')).eql('a b')
-    expect(h.bracket('[raw:a_b]')).eql('a_b')
-    expect(h.bracket('[raw:a\\_b]')).eql('a\\_b')
-    expect(h.bracket('[raw:attr("data-label") ":" attr("data-value")]')).eql('attr("data-label") ":" attr("data-value")')
+  it('bracket string-type', () => {
+    expect(h.bracket('[string:a_b]')).eql('a b')
+    expect(h.bracket('[string:a\\_b]')).eql('a\_b')
+    expect(h.bracket('[string:attr(data-label)_":_"]')).eql('attr(data-label) ": "')
   })
 
-  it('bracket string-type', () => {
-    expect(h.bracket('[string:a_b]')).eql('\'a b\'')
-    expect(h.bracket('[string:a\\_b]')).eql('\'a_b\'')
-    expect(h.bracket('[string:with-\\,-\'-and-"]')).eql('\'with-\\\\,-\\\'-and-"\'')
+  it('bracket quoted-type', () => {
+    expect(h.bracket('[quoted:a_b]')).eql('"a b"')
+    expect(h.bracket('[quoted:a\\_b]')).eql('"a_b"')
+    expect(h.bracket('[quoted:\'with-\\,-\'-and-"]')).toMatchInlineSnapshot('"\\"\'with-\\\\\\\\,-\'-and-\\\\\\"\\""')
   })
 })
diff --git a/test/preset-attributify.test.ts b/test/preset-attributify.test.ts
index 8c3f121562..c021854201 100644
--- a/test/preset-attributify.test.ts
+++ b/test/preset-attributify.test.ts
@@ -29,7 +29,7 @@ describe('attributify', () => {
   translate-x-100%
   translate-y-[10%]
   rotate-30
-  after="content-[unocss]"
+  after="content-[quoted:uno_css]"
   rotate-60="" ma=""
   m='\`
   1 2
@@ -65,8 +65,8 @@ describe('attributify', () => {
       <label absolute leading-1rem left-4 pointer-events-none text-gray-7 top="1/3" transition="200 linear"
         peer-not-placeholder-shown="-translate-y-4 scale-75 origin-top-left text-green-500"
         peer-focus="-translate-y-4 scale-75 origin-top-left text-green-500"
-        before="content-!"
-        after="content-[!]"
+        before-content="[quoted:!]"
+        after="content-[string:!]"
       >Experience now</label>
     </div>
   </div>
@@ -100,7 +100,7 @@ describe('attributify', () => {
   transform
   translate-x-100
   rotate-30
-  after={"content-[unocss]"}
+  after={"content-[quoted:uno-css]"}
   rotate-60="" ma=""
   m='\`
   1 2