BFE.devでのAI解答例 - フロントエンド面接質問
113. retina hairline(0.5px line in CSS)はどう実装する?

Retinaデバイス上でのCSSの0.5pxのボーダーを実現するには、次のようにします。

1. display: inline-block;を使用して要素をインライン化し、その幅を100％にします。
2. 要素にposition: relative;を設定し、その内部に疑似要素を作成します。
3. 疑似要素にcontent: "";を追加して、要素の高さを0に設定します。
4. 疑似要素にborder-bottom: 1px solid #ccc;のようなボーダーを追加します。
5. 疑似要素にtransform: scaleY(0.5);を設定して、ボーダーを半分の高さに縮小します。
6. position: absolute;を持つ疑似要素の位置をbottom: 0;またはtop: 100%;に設定します。

<style>
.retina-hairline {
  display: inline-block;
  width: 100%;
  position: relative;
}

.retina-hairline::after {
  content: "";
  display: block;
  height: 0;
  border-bottom: 1px solid #ccc;
  transform: scaleY(0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>

<div class="retina-hairline">
  Retina Hairline
</div>