时间戳

首页 > 解决方案 > :before 和 :after 不显示网站何时被推送

html - :before 和 :after 不显示网站何时被推送

问题描述

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

我正在使用 Netlify 和 Github 来推送我的网站。我尝试将代码添加到 codepen，并且元素在那里正确显示：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>

标签： htmlcsspseudo-element

解决方案

伪元素不适用于@import，因此可能会导致浏览器出现问题。

如果您使用@import 将所有 ::before 和 ::after 移动到主 css，它应该可以正常工作。

正确的示例代码

@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");

推荐阅读