diff --git a/.changeset/wicked-sloths-hide.md b/.changeset/wicked-sloths-hide.md
new file mode 100644
index 0000000000..8873361380
--- /dev/null
+++ b/.changeset/wicked-sloths-hide.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Bugfix: Scoped CSS with pseudoclasses and direct children selectors
diff --git a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
index 23350869cd..116302c0f1 100644
--- a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
+++ b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
@@ -75,18 +75,18 @@ export function scopeRule(selector: string, className: string) {
       continue;
     }
 
-    // don‘t scope body, title, etc.
-    if (NEVER_SCOPED_TAGS.has(value)) {
+    // don’t scope body, title, etc.
+    if (CSS_SEPARATORS.has(value) || NEVER_SCOPED_TAGS.has(value)) {
       ss = head + value + tail;
       continue;
     }
 
     // scope everything else
-    let newSelector = ss.substring(start, end);
+    let newSelector = value;
     const pseudoIndex = newSelector.indexOf(':');
     if (pseudoIndex > 0) {
-      // if there‘s a pseudoclass (:focus)
-      ss = head + newSelector.substring(start, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail;
+      // if there’s a pseudoclass (:focus or ::before)
+      ss = head + newSelector.substring(0, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail;
     } else {
       ss = head + newSelector + c + tail;
     }
diff --git a/packages/astro/test/astro-scoped-styles.test.js b/packages/astro/test/astro-scoped-styles.test.js
index 1fc11490b7..90ea5b7859 100644
--- a/packages/astro/test/astro-scoped-styles.test.js
+++ b/packages/astro/test/astro-scoped-styles.test.js
@@ -16,6 +16,9 @@ ScopedStyles('Scopes rules correctly', () => {
     '.class~:global(a)': `.class.${className}~a`,
     '.class *': `.class.${className} .${className}`,
     '.class>*': `.class.${className}>.${className}`,
+    '.class button:focus': `.class.${className} button.${className}:focus`,
+    '.class h3::before': `.class.${className} h3.${className}::before`,
+    'button:focus::before': `button.${className}:focus::before`,
     '.class :global(*)': `.class.${className} *`,
     '.class :global(.nav:not(.is-active))': `.class.${className} .nav:not(.is-active)`, // preserve nested parens
     '.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors