fix(challenges): update pseudo-element selector syntax from CSS2 to CSS3

challenges/01-responsive-web-design/applied-visual-design.json

@@ -2622,27 +2622,27 @@
       "id": "587d78a6367417b2b2512ade",
       "title": "Create a More Complex Shape Using CSS and HTML",
       "description": [
-        "One of the most popular shapes in the world is the heart shape, and this challenge creates it with raw CSS. But first, you need to understand the <code>:before</code> and <code>:after</code> selectors. These selectors are used to add something before or after a selected element. In the following example, a <code>:before</code> selector is used to add a rectangle to an element with the class <code>heart</code>:",
-        "<blockquote>.heart:before {<br>&nbsp;&nbsp;content: \"\";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>",
-        "For the <code>:before</code> and <code>:after</code> selectors to function properly, they must have a defined <code>content</code> property. It usually has content such as a photo or text. When the <code>:before</code> and <code>:after</code> selectors add shapes, the <code>content</code> property is still required, but it's set to an empty string.",
-        "In the above example, the element with the class of <code>heart</code> has a <code>:before</code> selector that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
+        "One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the <code>::before</code> and <code>::after</code> pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a <code>::before</code> pseudo-element is used to add a rectangle to an element with the class <code>heart</code>:",
+        "<blockquote>.heart::before {<br>&nbsp;&nbsp;content: \"\";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>",
+        "For the <code>::before</code> and <code>::after</code> pseudo-elements to function properly, they must have a defined <code>content</code> property. This property is usually used to add things like a photo or text to the selected element. When the <code>::before</code> and <code>::after</code> pseudo-elements are used to make shapes, the <code>content</code> property is still required, but it's set to an empty string.",
+        "In the above example, the element with the class of <code>heart</code> has a <code>::before</code> pseudo-element that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
         "<hr>",
-        "Transform the element on the screen to a heart. In the <code>heart:after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.",
+        "Transform the element on the screen to a heart. In the <code>heart::after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.",
         "Next, target the element with the class <code>heart</code> (just <code>heart</code>) and fill in the <code>transform</code> property. Use the <code>rotate()</code> function with -45 degrees. (<code>rotate()</code> works the same way that <code>skewX()</code> and <code>skewY()</code> do).",
-        "Finally, in the <code>heart:before</code> selector, set its <code>content</code> property to an empty string."
+        "Finally, in the <code>heart::before</code> selector, set its <code>content</code> property to an empty string."
       ],
       "tests": [
         {
           "text":
-            "The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.",
+            "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.",
           "testString":
-            "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color\\s*?:\\s*?pink\\s*?;/gi), 'The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.');"
+            "assert(code.match(/\\.heart::after\\s*?{\\s*?background-color\\s*?:\\s*?pink\\s*?;/gi), 'The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.');"
         },
         {
           "text":
-            "The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.",
+            "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.",
           "testString":
-            "assert(code.match(/border-radius\\s*?:\\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.');"
+            "assert(code.match(/border-radius\\s*?:\\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.');"
         },
         {
           "text":
@@ -2652,9 +2652,9 @@
         },
         {
           "text":
-            "The <code>content</code> of the <code>heart:before</code> selector should be an empty string.",
+            "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.",
           "testString":
-            "assert(code.match(/\\.heart:before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The <code>content</code> of the <code>heart:before</code> selector should be an empty string.');"
+            "assert(code.match(/\\.heart::before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.');"
         }
       ],
       "solutions": [],
@@ -2681,7 +2681,7 @@
             "  width: 50px;",
             "  transform: ;",
             "}",
-            ".heart:after {",
+            ".heart::after {",
             "  background-color: blue;",
             "  content: \"\";",
             "  border-radius: 25%;",
@@ -2691,7 +2691,7 @@
             "  top: 0px;",
             "  left: 25px;",
             "}",
-            ".heart:before {",
+            ".heart::before {",
             "  content: ;",
             "  background-color: pink;",
             "  border-radius: 50%;",