add double colon notation

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 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