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

伪元素不能与@import一起很好地工作，因此可能导致浏览器出现问题。

如果使用@import将所有:: before和:: after移至主CSS wihtout，则它应该可以正常工作。

更正示例代码

r = np.arange(len(m))
ret = m/m[r,:,r,None] # Add new axis with None to allow for broadcasting

错误的示例代码

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

Answer 2

它是::before和::after。在某些环境中，选择器可以与单个:一起使用，但这在CSS3中不是正确的语法。

更新： :before和::before都可以使用，因为CBroe指出CSS3与CSS2向后兼容。

：before和：after推送网站时未显示

2 个答案: