feat(curriculum): Add interactive examples to Pseudo-elements lesson (#62995)

curriculum/challenges/english/blocks/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/672bbed37c6f51aa3a15e78c.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-pseudo-elements
 ---
 
-# --description--
+# --interactive--
 
 One of the most interesting aspects of CSS is the use of pseudo-elements. In this context, "pseudo" means "not real", so pseudo-elements are virtual or synthetic elements that don't directly match any actual HTML elements. They allow you to style specific parts of an element or insert content without adding extra HTML.
 
@@ -23,14 +23,15 @@ Pseudo-elements allow you to style specific parts of an element's content or ins
 
 Let's start by looking at examples for the `::before` and `::after` pseudo-elements. As their names suggest, `::before` lets you insert content just before the element's content while `::after` lets you insert content after it.
 
-Here is an example of a button element:
+Here is an example of a button element. In the CSS, we will use absolute positioning and the `::before` pseudo-element to add a star before the button's `Learn More` text. You will learn more about absolute positioning in future lessons.
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <button class="cta-button">Learn More</button>
 ```
 
-In the CSS, we will use absolute positioning and the `::before` pseudo-element to add a star before the button's `Learn More` text. You will learn more about absolute positioning in future lessons.
-
 ```css
 .cta-button {
   background-color: lightseagreen;
@@ -50,8 +51,17 @@ In the CSS, we will use absolute positioning and the `::before` pseudo-element t
 }
 ```
 
+:::
+
 The `content` property is used to represent the content you wish to add before the button text. In this example, we are adding a star. You'll notice that you can not only insert content but also style it. Here's an example of the `::after` pseudo-element with the same button:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<button class="cta-button">Learn More</button>
+```
+
 ```css
 .cta-button {
   background-color: orange;
@@ -71,10 +81,19 @@ The `content` property is used to represent the content you wish to add before t
 }
 ```
 
+:::
+
 In the `::after` pseudo-element, the `transition` property is used to animate changes over 0.3 seconds with an easing effect, creating a smooth and gradual transformation rather than a sudden one. You will learn more about the `transition` property in future lessons. 
 
 You can also attach a pseudo-class to the content you insert into another content with the `::before` and `::after` pseudo-elements. For example, a hover state for the content. Here's an example:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css" />
+<button class="cta-button">Learn More</button>
+```
+
 ```css
 .cta-button {
   background-color: orange;
@@ -98,29 +117,37 @@ You can also attach a pseudo-class to the content you insert into another conten
 }
 ```
 
+:::
+
 With `transform: translateX(2px)` in the hover state, the content gets pushed to the right by `2px` any time the user hovers on the button. The transition property in the `::after` itself ensures the process takes `0.3s`.
 
 That's what the `transform` property does – it allows you to rotate, skew, scale, or translate an element in a particular direction. You will learn more about that in future lessons.
 
-In the next example, we will look at the `::first-letter` pseudo-element. The `::first-letter` pseudo-element targets the first letter of an element's content, allowing you to style it. Here's an example of some paragraph text:
+In the next example, we will look at the `::first-letter` pseudo-element. The `::first-letter` pseudo-element targets the first letter of an element's content, allowing you to style it. Here's an example of some paragraph text. If we want to style the first letter, we can use the `::first-letter` pseudo-element like this:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <p>freeCodeCamp lets you learn to code without having to pay.</p>
 ```
 
-If we want to style the first letter, we can use the `::first-letter` pseudo-element like this:
-
 ```css
 p::first-letter {
   font-size: 4rem;
 }
 ```
 
+:::
+
 In the last example, we will look at is the `::marker` pseudo-element which lets you select the marker, bullet or numbering of list items for styling. The `::marker` pseudo-element offers a way to enhance your website's brand identity by customizing list markers to match your color scheme.
 
-Here's an example of an unordered list and an ordered list:
+Here's an example of an unordered list and an ordered list. To change the list item's marker color and size, you can use the `::marker` pseudo-element like this:
+
+:::interactive_editor
 
 ```html
+<link rel="stylesheet" href="styles.css" />
 <ul>
   <li>Unordered list item 1</li>
   <li>Unordered list item 2</li>
@@ -136,8 +163,6 @@ Here's an example of an unordered list and an ordered list:
 </ol>
 ```
 
-To change the list item's marker color and size, you can use the `::marker` pseudo-element like this:
-
 ```css
 li::marker {
   color: crimson;
@@ -146,6 +171,8 @@ li::marker {
 }
 ```
 
+:::
+
 In this lesson, we have covered only a few pseudo-elements. But there are many more like the `::placeholder`, `::spelling-error` and `::selection` that I encourage you to explore on your own.
 
 # --questions--