diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index c8e0f2bd77e7..1fe14ba1988f 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -1004,8 +1004,8 @@ Here's how it works:
- We wrap the ` ` in a `` so the custom control properly triggers the file browser.
- We hide the default file ` ` via `opacity`.
-- We use `:after` to generate a custom background and directive (*Choose file...*).
-- We use `:before` to generate and position the *Browse* button.
+- We use `::after` to generate a custom background and directive (*Choose file...*).
+- We use `::before` to generate and position the *Browse* button.
- We declare a `height` on the ` ` for proper spacing for surrounding content.
In other words, it's an entirely custom element, all generated via CSS.
diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index 6fa38a3819fa..f69d2519ec86 100644
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -22,7 +22,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
The `` and `` elements are updated to provide better page-wide defaults. More specifically:
-- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
- No base `font-size` is declared on the ``, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
- The `` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `` has a declared `background-color`, defaulting to `#fff`.
diff --git a/docs/4.0/examples/blog/blog.css b/docs/4.0/examples/blog/blog.css
index 5fed564246d8..18db4290e27b 100644
--- a/docs/4.0/examples/blog/blog.css
+++ b/docs/4.0/examples/blog/blog.css
@@ -62,7 +62,7 @@ h6, .h6 {
.nav-link.active {
color: #fff;
}
-.nav-link.active:after {
+.nav-link.active::after {
position: absolute;
bottom: 0;
left: 50%;
diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md
index 08dd8320997b..4035ae8f4ae9 100644
--- a/docs/4.0/getting-started/introduction.md
+++ b/docs/4.0/getting-started/introduction.md
@@ -97,7 +97,7 @@ On the rare occasion you need to override it, use something like the following:
}
{% endhighlight %}
-With the above snippet, nested elements—including generated content via `:before` and `:after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
+With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).