絶対位置に配置したものを表示させる

position: absolute を指定した Box の下の線が出なくて困った。ので、いろいろ試してみた。

次の指定では線が出ない。

• Demo

.hoge {
    position: relative;
    ...
}

/* border-bottom は出ない */
.hoge:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    border-bottom: 2px solid #B13546;
}

padding を使って Box の幅と高さを取ると線が表示される。

• Demo - padding

/* 幅 2em の線が出る */
.hoge:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    padding: 1em; /* <- */
    border-bottom: 2px solid #B13546;
}

width を使って Box の幅を取っても線は表示される。

• Demo - width

/* 幅 2em の線が出る */
.hoge:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 2em; /* <- */
    border-bottom: 2px solid #B13546;
}

left, right を指定すると Box は .hoge の横幅いっぱいに表示される。

• Demo - left and right

.hoge:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    border-bottom: 2px solid #B13546;
}