github 页面上的伪类中的图像

Image in pseudoclass before on github pages

提问人：Tactic Sugar 提问时间：7/31/2022 更新时间：7/31/2022 访问量：41

问：

将 png 放入伪类 ：：before 的内容中。 尝试了所有路径，GitHub 页面不会显示它。

https://github.com/tacticSugar/Resume - 回购 https://tacticsugar.github.io/Resume/ - 页面

.work h3 {
  padding-left: 5rem;
  position: relative;
}
.work h3::before {
  content: url(https://tacticsugar.github.io/Resume/arrow.png);
  display: inline-block;
  width: 0;
  height: 0;
  transform: scale(.3);
  position: absolute;
  top: 0;
  left: -1.5rem;
 }
css github-pages 伪类

评论

0赞 A Haworth 7/31/2022
它在使用基本 HTML 的简单测试中对我有用。您能否向我们展示一个完整的示例，包括 HTML，这绝对表明它不起作用。
0赞 VonC 7/31/2022
@AHaworth 不过，它是否像 GitHub Pages 所呈现的那样工作？因为这是这个问题的具体背景。我确信它可以在一个简单的文件中本地工作。index.html

答：

0赞 VonC 7/31/2022 #1

它应该在 GitHub Pages 的上下文中工作，因为 rosmeltd/css_pseudoclases 确实在他的 GitHub Pages 站点 rosmeltd.github.io/css_pseudoclases 中使用了伪元素，CSS：

/* ============ CHALLENGE 7 ============ */
.challenge--7 .challenge__code p::before,
.challenge--7 .challenge__code p::after {
  content: url(img/smiley.gif);
  vertical-align: middle;
}

为：

<section class="challenge challenge--7">
  <h4 class="challenge__title">
    <b>VII.</b> Inserte la imagen "smiley.gif" antes y después de cualquier elemento &lt;p&gt;, utilizando los pseudoelementos ::before y ::after.
  </h4>
  <div class="challenge__code">
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </div>
</section>

在你的例子中，CSSLint提到：

不允许使用限定的标题

标题（）不应限定。h3

.work h3::before {

对于测试，请尝试而不是 。h3::before.work h3::before

上一个：如何创建带有片段标识符（哈希链接）的 react 选项卡导航栏链接？

下一个：具有数据集分割的 K-Means 聚类算法