≪ Today I learned.
RSS購読
    公開日
    タグ
    CSS
    著者
    ダーシノ

    border-blockで論理的なブロック方向にボーダーを引く

    Logical Propertiesのひとつであるborder-blockを使うことで、論理的なブロック方向にボーダーを引くことができる。

    「論理的なブロック方向」とは縦書き、横書き、右から読む、左から読むなど言語によってwriting-modeが異なっても、意味的に正しい方向を指す。

    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    h1 {
      border-block-end: solid 4px;
    }

    デモ

    English

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    日本語

    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

    ブラウザ対応状況