:before 和 :after 在推送网站时不显示

Question

我正在尝试使用 :before 和 :after 元素来为我的页面增添趣味，但是当我推送它时，实时站点没有它们。在我的本地计算机上， :before 和 :after 都正确显示。我的实时站点在这里：https://findingfutures.eu

我正在使用 Netlify 和 Github 来推送我的网站。我已经尝试将代码添加到代码笔，并且元素在那里正确显示：https://codepen.io/Barsnes/pen/pKBzrK

这是我的代码，删除了很多内容以使其更简单，

.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>Lorem<a href="https://www.barsnes.tk">Click to view project</a></p>
  </div>

  <div class="project_2">
    <img src="images/projects/project__portrait_photography.png">
    <h2>Portrait Photography</h2>
    <p>Lorem<a href="projects/portraits">Click to view project</a></p>
  </div>

  <div class="project_3">
    <img src="https://source.unsplash.com/1920x1080/?photoshop">
    <h2>Design</h2>
    <p>Lorem<a href="https://www.barsnes.tk">Click to view project</a></p>
  </div>
</div>

Answer 1

是 ::before 和 ::after。对于某些环境，选择器可能使用单个 :，但它不是 CSS3.

中的正确语法

更新： :before 和 ::before 都可以工作，因为 CSS3 向后兼容 CSS2，正如 CBroe 指出的那样。

Answer 2

伪元素不能很好地与@import 配合使用，因此会导致浏览器出现问题。

如果您将所有的 ::before 和 ::after 移动到主 css 中而不使用 @import，它应该可以完美地工作。

正确的示例代码

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

示例代码错误

@import url("_styles/media_query.css");
@import url("_styles/cookie.css");
@import url("_styles/pseudeo_elements.css");

:before 和 :after 在推送网站时不显示

:before and :after not showing when site is pushed

html

css

pseudo-element