ヘアライン

• ヘアラインを追加する
• ヘアラインを削除する
• ヘアラインの色
• ヘアラインの遷移時間

Konsta UIでは、多くの要素で通常のCSSボーダーの代わりに「ヘアライン」を使用しています。

ヘアラインは:afterと:before疑似要素を使用して作成されます。この方法により、真の0.5pxと0.33px幅の「ボーダー」を実現できます。

ヘアラインを追加する

ヘアラインを追加するには、.hairline-[side]クラスを使用する必要があります

例：

<!-- add bottom hairline to the element -->
<div class="relative hairline-b">...</div>

ヘアラインを削除する

ヘアラインを削除するには、.no-hairline-[side]クラスを使用する必要があります

ヘアラインの色

ヘアラインの色は、.hairline-[color]クラスでカスタマイズできます

例：

<!-- add bottom hairline with red-500 color to the element -->
<div class="relative hairline-b hairline-red-500">...</div>

ヘアラインの遷移時間

ヘアラインの遷移時間を制御するには、.hairline-duration-[duration]クラスを使用できます

例：

<!-- add bottom hairline with red-500 color to the element, and change its color to blue-500 on hover -->
<div
  class="relative hairline-b hairline-red-500 hairline-duration-300 hover:hairline-blue-500"
>
  ...
</div>