--- a/devtools/client/inspector/shared/utils.js
+++ b/devtools/client/inspector/shared/utils.js
@@ -140,16 +140,18 @@ function translateNodeFrontToGrip(nodeFr
     attributesMap[name] = value;
   }
 
   return {
     actor: nodeFront.actorID,
     preview: {
       attributes: attributesMap,
       attributesLength: attributes.length,
+      isAfterPseudoElement: nodeFront.isAfterPseudoElement,
+      isBeforePseudoElement: nodeFront.isBeforePseudoElement,
       // All the grid containers are assumed to be in the DOM tree.
       isConnected: true,
       // nodeName is already lowerCased in Node grips
       nodeName: nodeFront.nodeName.toLowerCase(),
       nodeType: nodeFront.nodeType,
     }
   };
 }

--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@@ -4420,22 +4420,31 @@ function ElementNode(props) {
       });
     }
   }
 
   return span(baseConfig, ...elements, inspectIcon);
 }
 
 function getElements(grip, mode) {
-  let { attributes, nodeName } = grip.preview;
+  let {
+    attributes,
+    nodeName,
+    isAfterPseudoElement,
+    isBeforePseudoElement
+  } = grip.preview;
   const nodeNameElement = span({
     className: "tag-name"
   }, nodeName);
 
   if (mode === MODE.TINY) {
+    if (isAfterPseudoElement || isBeforePseudoElement) {
+      return [span({ className: "attrName" }, `::${ isAfterPseudoElement ? "after" : "before" }`)];
+    }
+
     let elements = [nodeNameElement];
     if (attributes.id) {
       elements.push(span({ className: "attrName" }, `#${attributes.id}`));
     }
     if (attributes.class) {
       elements.push(span({ className: "attrName" }, attributes.class.trim().split(/\s+/).map(cls => `.${cls}`).join("")));
     }
     return elements;
@@ -6626,9 +6635,9 @@ function mergeResponses(responses) {
 
   return data;
 }
 
 module.exports = reducer;
 
 /***/ })
 /******/ ]);
-});
\ No newline at end of file
+});