diff --git a/snippets/border-with-top-triangle.md b/snippets/border-with-top-triangle.md
index 2ba697a8c..c643e3d79 100644
--- a/snippets/border-with-top-triangle.md
+++ b/snippets/border-with-top-triangle.md
@@ -20,7 +20,7 @@ Creates a text container with a triangle at the top.
   margin-top: 20px;
 }
 
-.container::before, .container::after {
+.container:before, .container:after {
   content: '';
   position: absolute;
   bottom: 100%;
@@ -29,7 +29,7 @@ Creates a text container with a triangle at the top.
   border-bottom-color: #dddddd;
 }
 
-.container::after {
+.container:after {
   left: 20px;
   border: 10px solid transparent;
   border-bottom-color: #ffffff;
@@ -38,10 +38,10 @@ Creates a text container with a triangle at the top.
 
 #### Explanation
 
-- Use the `::before` and `::after` pseudo-elements to create two triangles. 
-- The color of the `::before` triangle should be the same as the container's border color. 
-- The color of the `::after` triangle should be the same as the container background color.
-- The border width of the `::before` triangle should be `1px` wider than the `::after` triangle, in order to act as the border.
-- The `::after` triangle should be `1px` to the right of the `::before` triangle to allow for its left border to be shown.
+- Use the `:before` and `:after` pseudo-elements to create two triangles.
+- The color of the `:before` triangle should be the same as the container's border color.
+- The color of the `:after` triangle should be the same as the container's background color.
+- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.
+- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.
 
 #### Browser support