diff --git a/features/before-after.yml b/features/before-after.yml
new file mode 100644
index 00000000000..e7af46e4a00
--- /dev/null
+++ b/features/before-after.yml
@@ -0,0 +1,13 @@
+name: ::before and ::after
+description: The `::before` and `::after` CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the `content` property to generate cosmetic content.
+spec: https://drafts.csswg.org/css-pseudo-4/#generated-content
+caniuse: css-gencontent
+status:
+ compute_from:
+ - css.selectors.before
+ - css.selectors.after
+compat_features:
+ - css.selectors.before
+ - css.selectors.before.animation_and_transition_support
+ - css.selectors.after
+ - css.selectors.after.animation_and_transition_support
diff --git a/features/before-after.yml.dist b/features/before-after.yml.dist
new file mode 100644
index 00000000000..480a3356a2b
--- /dev/null
+++ b/features/before-after.yml.dist
@@ -0,0 +1,64 @@
+# Generated from: before-after.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+ baseline: high
+ baseline_low_date: 2015-07-29
+ baseline_high_date: 2018-01-29
+ support:
+ chrome: "1"
+ chrome_android: "18"
+ edge: "12"
+ firefox: "1.5"
+ firefox_android: "4"
+ safari: "4"
+ safari_ios: "3.2"
+compat_features:
+ # baseline: high
+ # baseline_low_date: 2015-07-29
+ # baseline_high_date: 2018-01-29
+ # support:
+ # chrome: "1"
+ # chrome_android: "18"
+ # edge: "12"
+ # firefox: "1.5"
+ # firefox_android: "4"
+ # safari: "4"
+ # safari_ios: "3"
+ - css.selectors.before
+
+ # ⬇️ Same status as overall feature ⬇️
+ # baseline: high
+ # baseline_low_date: 2015-07-29
+ # baseline_high_date: 2018-01-29
+ # support:
+ # chrome: "1"
+ # chrome_android: "18"
+ # edge: "12"
+ # firefox: "1.5"
+ # firefox_android: "4"
+ # safari: "4"
+ # safari_ios: "3.2"
+ - css.selectors.after
+
+ # baseline: high
+ # baseline_low_date: ≤2017-03-27
+ # baseline_high_date: ≤2019-09-27
+ # support:
+ # chrome: "26"
+ # chrome_android: "26"
+ # edge: "12"
+ # firefox: "4"
+ # firefox_android: "4"
+ # safari: ≤10.1
+ # safari_ios: ≤10.3
+ - css.selectors.before.animation_and_transition_support
+
+ # baseline: false
+ # support:
+ # chrome: "26"
+ # chrome_android: "26"
+ # edge: "12"
+ # firefox: "4"
+ # firefox_android: "4"
+ - css.selectors.after.animation_and_transition_support
diff --git a/features/file-selector-button.yml b/features/file-selector-button.yml
new file mode 100644
index 00000000000..5185c1991ce
--- /dev/null
+++ b/features/file-selector-button.yml
@@ -0,0 +1,6 @@
+name: ::file-selector-button
+description: The `::file-selector-button` CSS pseudo-element selects the button of a `` element.
+spec: https://drafts.csswg.org/css-pseudo-4/#file-selector-button-pseudo
+group: selectors
+compat_features:
+ - css.selectors.file-selector-button
diff --git a/features/file-selector-button.yml.dist b/features/file-selector-button.yml.dist
new file mode 100644
index 00000000000..4a84f652bdb
--- /dev/null
+++ b/features/file-selector-button.yml.dist
@@ -0,0 +1,17 @@
+# Generated from: file-selector-button.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+ baseline: high
+ baseline_low_date: 2021-04-26
+ baseline_high_date: 2023-10-26
+ support:
+ chrome: "89"
+ chrome_android: "89"
+ edge: "89"
+ firefox: "82"
+ firefox_android: "82"
+ safari: "14.1"
+ safari_ios: "14.5"
+compat_features:
+ - css.selectors.file-selector-button
diff --git a/features/first-letter.yml b/features/first-letter.yml
new file mode 100644
index 00000000000..43f6510a26a
--- /dev/null
+++ b/features/first-letter.yml
@@ -0,0 +1,11 @@
+name: ::first-letter
+description: The `::first-letter` CSS pseudo-element selects the first letter in an element for styling.
+spec: https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo
+group: selectors
+caniuse: css-first-letter
+status:
+ compute_from: css.selectors.first-letter
+compat_features:
+ - css.selectors.first-letter
+ - css.selectors.first-letter.dutch_ij_digraph
+ - css.selectors.first-letter.svg_text_element
diff --git a/features/first-letter.yml.dist b/features/first-letter.yml.dist
new file mode 100644
index 00000000000..441d91a0679
--- /dev/null
+++ b/features/first-letter.yml.dist
@@ -0,0 +1,41 @@
+# Generated from: first-letter.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+ baseline: high
+ baseline_low_date: 2015-07-29
+ baseline_high_date: 2018-01-29
+ support:
+ chrome: "1"
+ chrome_android: "18"
+ edge: "12"
+ firefox: "1"
+ firefox_android: "4"
+ safari: "1"
+ safari_ios: "1"
+compat_features:
+ # ⬇️ Same status as overall feature ⬇️
+ # baseline: high
+ # baseline_low_date: 2015-07-29
+ # baseline_high_date: 2018-01-29
+ # support:
+ # chrome: "1"
+ # chrome_android: "18"
+ # edge: "12"
+ # firefox: "1"
+ # firefox_android: "4"
+ # safari: "1"
+ # safari_ios: "1"
+ - css.selectors.first-letter
+
+ # baseline: false
+ # support:
+ # firefox: "87"
+ # firefox_android: "87"
+ - css.selectors.first-letter.dutch_ij_digraph
+
+ # baseline: false
+ # support:
+ # firefox: "124"
+ # firefox_android: "124"
+ - css.selectors.first-letter.svg_text_element
diff --git a/features/first-line.yml b/features/first-line.yml
new file mode 100644
index 00000000000..a181687369a
--- /dev/null
+++ b/features/first-line.yml
@@ -0,0 +1,10 @@
+name: ::first-line
+description: The `::first-line` CSS pseudo-element selects the first line of text in an element for styling.
+spec: https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo
+group: selectors
+caniuse: css-first-line
+status:
+ compute_from: css.selectors.first-line
+compat_features:
+ - css.selectors.first-line
+ - css.selectors.first-line.svg_text_element
diff --git a/features/first-line.yml.dist b/features/first-line.yml.dist
new file mode 100644
index 00000000000..aa5117f1658
--- /dev/null
+++ b/features/first-line.yml.dist
@@ -0,0 +1,35 @@
+# Generated from: first-line.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+ baseline: high
+ baseline_low_date: 2015-07-29
+ baseline_high_date: 2018-01-29
+ support:
+ chrome: "1"
+ chrome_android: "18"
+ edge: "12"
+ firefox: "1"
+ firefox_android: "4"
+ safari: "1"
+ safari_ios: "1"
+compat_features:
+ # ⬇️ Same status as overall feature ⬇️
+ # baseline: high
+ # baseline_low_date: 2015-07-29
+ # baseline_high_date: 2018-01-29
+ # support:
+ # chrome: "1"
+ # chrome_android: "18"
+ # edge: "12"
+ # firefox: "1"
+ # firefox_android: "4"
+ # safari: "1"
+ # safari_ios: "1"
+ - css.selectors.first-line
+
+ # baseline: false
+ # support:
+ # firefox: "124"
+ # firefox_android: "124"
+ - css.selectors.first-line.svg_text_element
diff --git a/features/placeholder-shown.yml b/features/placeholder-shown.yml
new file mode 100644
index 00000000000..da5aca117eb
--- /dev/null
+++ b/features/placeholder-shown.yml
@@ -0,0 +1,11 @@
+name: :placeholder-shown
+description: The `:placeholder-shown` CSS pseudo-element selects `` and `