Question

我发现我的一个博客页面与我在本地服务器上看到的不同。所以我调出HTML代码，发现有不同之处。

本地服务器中的那个：

<li>
   <a target="_blank" href="http://weibo.com">
     <span class="fa-stack fa-lg">
       <i class="fa fa-circle fa-stack-2x">
         ::before
       </i>
       <i class="fa fa-weibo fa-stack-1x fa-inverse">
         ::before
       </i>
     </span>
   </a>
 </li>

Github Pages中的那个：

<li>
   <a target="_blank" href="http://weibo.com">
      <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-weibo fa-stack-1x fa-inverse"></i>
      </span>
   </a>
</li>

我从其他人那里分享了这个Jekyll模板。我用谷歌搜索了::before，但我还是不太了解它。有人可以告诉我如何将::before添加到我的Github Pages HTML代码中吗？

Answer 1

css中的:before和:after是伪元素。

CSS伪元素用于设置元素的指定部分的样式。

例如，它可以用于：

设置元素的第一个字母或行的样式
在元素内容之前或之后插入内容

您只能在开发者工具上看到此::before和::after。

在这种情况下，您使用的是一些图标，此图标正在使用:before。

如果你的图标没问题，那么:before正在运作。

http://www.w3schools.com/css/css_pseudo_elements.asp

为什么本地Jekyll代码与上传到github的代码不同？

1 个答案: