:before and :after not showing when site is pushed - html

Question

I am trying to use :before and :after elements to spice up my page, but when I push it, the live site does not have them. On my local computer, both :before and :after is showing up correctly. My live site is here: https://findingfutures.eu
I am using Netlify and Github to push my site. I have tried adding the code to a codepen, and the elements are being displayed correctly there: https://codepen.io/Barsnes/pen/pKBzrK
Here is my code, with a lot of removed content to make it simpler,
.products_design:before {
content: " ";
display: block;
width: 70%;
height: .3em;
position: absolute;
background: #FFF;
top: -16.5em;
margin-left: 15%;
box-shadow: 0 0 20px #00000040;
}
.products_design:after {
content: " ";
display: block;
width: 70%;
height: .3em;
position: absolute;
background: #FFF;
bottom: -10.5em;
margin-left: 15%;
box-shadow: 0 0 20px #00000040;
}
.products_design {
position: relative;
height: auto;
width: 80vw;
margin: 25em 10vw 10em 10vw;
display: inline-block;
box-shadow: 0 0 30px #00000030;
background: linear-gradient(to top right, #23232320, #23232305);
}
.products_design h1 {
display: block;
position: absolute;
top: -2em;
line-height: .8em;
text-transform: uppercase;
text-shadow: 0 0 10px #00000060;
}
.products_design span {
display: block;
}
.products_design img {
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.project_1,
.project_2,
.project_3,
.project_4,
.project_5,
.project_6 {
width: 33.33%;
float: left;
padding: 0;
margin: 0;
position: relative;
display: block;
}
.products_design h2 {
font-size: 1.8em;
padding: .4em .4em 0 .2em;
}
.products_design p {
padding: .4em .4em 2em .4em;
font-size: 1em;
margin-bottom: 3em;
}
.products_design a {
display: block;
color: orange;
margin: auto;
position: relative;
text-decoration: none;
}
.products_design a:hover {
text-shadow: 0 0 10px #000;
color: #FFFFFF
}
<div class="products_design">
<div class="products">
<div class="products_title">
<h1>our past<span>projects</span></h1>
</div>
</div>
<div class="project_1">
<img src="images/projects/project__tobias_barsnes_website.png" />
<h2>Portfolio Website</h2>
<p>LoremClick to view project</p>
</div>
<div class="project_2">
<img src="images/projects/project__portrait_photography.png">
<h2>Portrait Photography</h2>
<p>LoremClick to view project</p>
</div>
<div class="project_3">
<img src="https://source.unsplash.com/1920x1080/?photoshop">
<h2>Design</h2>
<p>LoremClick to view project</p>
</div>
</div>

Answer 1

Pseudo elements does not work well with #import, and can therefor cause problems in the browser.
If you move all your ::before and ::after to the main css wihtout using #import, it should work perfectly.
Correct Example Code
#import url("_styles/header.css");
#import url("_styles/body.css");
.products_design::before {
content: " ";
display: block;
width: 70%;
height: 5px;
position: absolute;
background: #FFF;
top: -16.5em;
margin-left: 15%;
box-shadow: 0 0 20px #00000040;
}
.products_design::after {
content: " ";
display: block;
width: 70%;
height: 5px;
position: absolute;
background: #FFF;
bottom: -10.5em;
margin-left: 15%;
box-shadow: 0 0 20px #00000040;
}
.about_images::before {
content:" ";
display: block;
width: 50%;
margin-left: 25%;
height: 5px;
background: #FFF;
position: absolute;
top: -13em;
box-shadow: 0 0 20px #00000040
}
Wrong Example Code
#import url("_styles/media_query.css");
#import url("_styles/cookie.css");
#import url("_styles/pseudeo_elements.css");

Answer 2

It's ::before and ::after.
For some environments selectors may work with a single :, but it's not the proper syntax in CSS3.
Update:
:before and ::before will both work, as CSS3 is backwards compatible with CSS2, as CBroe pointed out.