/ 前端基础

从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧。

示例

DOM结构为:

<div class="home-entry-box relative clearfix">
  <span class="home-entry-box-arrow"></span>
  <ul class="pull-left">
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-question-off"></i>
        <span>提问</span>
      </a>
    </li>
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-answer-off"></i>
        <span>回答</span>
      </a>
    </li>
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-post-off"></i>
        <span>写文章</span>
      </a>
    </li>
  </ul>
  <a class="pull-right"><span class="draft">草稿</span></a>
</div>

在这个示例中,标注了两处,第一处是一个装饰之类的东西,这个装饰让整个用户操作导航条好看了不少;第二处是项与项之间的分隔装饰。(为了命名方便,后文中第一处叫做对话修饰,第二处叫做分隔修饰

实现

分隔修饰: 由于分隔修饰比对话修饰更简单一些,所以先说下分隔修饰的实现。一般情况下,我会想到用border-right去实现这个效果,但这有个问题,效果中这个修饰的高度既不是每一项的高度,也不是每一项的内容的高度,因此用border是不太好处理的,并且也不太方便定位的控制。在这里,可以使用伪元素,将每一项(li.home-entry-item)设置为position: relative,之后每一项加一个伪元素,决定定位来实现分隔修饰的效果,代码为:

.home-entry-item:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 20px;
  left: 0;
  top: 50%;
  margin-top: -10px;
  background: #f0f0f0;
}

这样,既实现了高度的控制,又实现了定位的控制。

对话修饰: 这是一个直角三角形,刚开始看到的时候,我以为是一个图片做的小图标,后来审查了一下,发现是巧妙地利用了伪元素做出来的。学习了CSS的同学应该都接触过一个经典例子吧,就是画三角形,思路是将一个元素宽高都设置为0,之后控制三个方向的border为透明,再控制最后一个方向的border即可。另外还可以通过控制不同方向border的宽度来实现不同形状的三角形。

这里我们就可以利用伪元素来画这个三角形,不过仔细看的话,会发现示例中的三角形还是一个有边框的三角形,这也是我一开始以为是图片做的图标的原因。后来看了一下知乎的工程师的处理方式,发现自己CSS的使用和创造力还有很多要学习的地方。解决办法是:每个元素正好有两个伪元素,只要再利用一个伪元素画一个三角形,再把两个伪元素画的三角形叠加起来就可以了。其中一个三角形要比另一个小1px的宽高。

示例中的完成方案是通过伪元素画两个等边三角形,其中一个比另一个的border-width小1px,并且垂直距离多偏移1px,水平距离多偏移2px(这样才能让大的三角形包住小的三角形,形成类似边框的效果),之后设置span.home-entry-box-arrow为overflow: hidden; 截去三角形多余的部分,形成直角三角形,这样比直接画直角三角形更省事。代码如下:

.home-entry-box-arrow {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 10px;
  height: 10px;
  overflow: hidden;
}
.home-entry-box-arrow:before,
.home-entry-box-arrow:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
}
.home-entry-box-arrow:before {
  border-top-color: #f0f0f0;
  border-width: 14px;
  top: 0;
  left: 0;
}
.home-entry-box-arrow:after {
  border-top-color: #fafafa;
  border-width: 13px;
  top: 1px;
  left: 2px;
}

总结

利用伪元素,可以实现很多装饰效果,善于利用可以写出更好的CSS以及免去不必要的表现型的HTML