--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -26,16 +26,17 @@ const { parseFontVariationAxes } = requi
 const { updateFonts } = require("./actions/fonts");
 const {
   applyInstance,
   resetFontEditor,
   updateAxis,
   updateCustomInstance,
   updateFontEditor,
   updateFontProperty,
+  updateWarningMessage,
 } = require("./actions/font-editor");
 const { updatePreviewText } = require("./actions/font-options");
 
 const CUSTOM_INSTANCE_NAME = getStr("fontinspector.customInstanceName");
 const FONT_PROPERTIES = [
   "font-family",
   "font-optical-sizing",
   "font-size",
@@ -456,17 +457,18 @@ class FontInspector {
    * Check if a selected node exists and fonts can apply to it.
    *
    * @return {Boolean}
    */
   isSelectedNodeValid() {
     return this.inspector &&
            this.inspector.selection.nodeFront &&
            this.inspector.selection.isConnected() &&
-           this.inspector.selection.isElementNode();
+           this.inspector.selection.isElementNode() &&
+           !this.inspector.selection.isPseudoElementNode();
   }
 
   /**
    * Sync the Rule view with the latest styles from the page. Called in a debounced way
    * (see constructor) after property changes are applied directly to the CSS style rule
    * on the page circumventing direct TextProperty.setValue() which triggers expensive DOM
    * operations in TextPropertyEditor.update().
    *
@@ -662,18 +664,24 @@ class FontInspector {
    * and the ones already in the store to decide if to update the font editor state.
    */
   async refreshFontEditor() {
     // Early return if pref for font editor is not enabled.
     if (!Services.prefs.getBoolPref(PREF_FONT_EDITOR)) {
       return;
     }
 
-    if (!this.inspector || !this.store || !this.isSelectedNodeValid()) {
+    if (!this.store || !this.isSelectedNodeValid()) {
       this.store.dispatch(resetFontEditor());
+
+      if (this.inspector.selection.isPseudoElementNode()) {
+        const noPseudoWarning = getStr("fontinspector.noPseduoWarning");
+        this.store.dispatch(updateWarningMessage(noPseudoWarning));
+      }
+
       return;
     }
 
     const options = {};
     if (this.pageStyle.supportsFontVariations) {
       options.includeVariations = true;
     }
 

--- a/devtools/client/locales/en-US/font-inspector.properties
+++ b/devtools/client/locales/en-US/font-inspector.properties
@@ -65,8 +65,12 @@ fontinspector.fontItalicLabel=Italic
 # contains the names of font families declared but not used.
 fontinspector.familiesUnusedLabel=Unused font families
 
 # LOCALIZATION NOTE (fontinspector.showMore): Label for a collapsed list of fonts.
 fontinspector.showMore=Show more
 
 # LOCALIZATION NOTE (fontinspector.showLess): Label for an expanded list of fonts.
 fontinspector.showLess=Show less
+
+# LOCALIZATION NOTE (fontinspector.noPseduoWarning): Warning message shown when the
+# selected element is a pseudo-element that the font editor cannot work with.
+fontinspector.noPseduoWarning=Pseudo-elements are not currently supported.