CSS/疑似要素/疑似要素を対象の外側に挿入する

CSS/疑似要素/疑似要素を対象の外側に挿入する

結論から言うと、外側には挿入できない。以下代替案。

ブロック要素同士を繋ぐ線を引きたいので疑似要素 after を使って線を挿入してみた。

div.hogehoge{
    border: 1px solid #000;
}
div.hogehoge::after{
    content: url(line.png);
}

しかし疑似要素というのは対象の「内側」に挿入されるので、その分ブロックが広がってしまって線がブロックの内側に入ってしまう。

なのでまず線をブロックの計算対象に入らないように absolute 指定にする。

div.hogehoge{
    border: 1px solid #000;
}
div.hogehoge::after{
    content: url(line.png);
    position: absolute;    /* サイズ計算から除外 */
}

これで疑似要素で指定した画像がブロックの外に飛び出したように見える。

このままだと他の要素にめり込むのでこの線のぶんだけ元の要素の専有領域を広げる

div.hogehoge{
    border: 1px solid #000;
    margin-bottom: 25px;    /* 線の高さ分だけ増やす */
}
div.hogehoge::after{
    content: url(line.png);
    position: absolute;
}

これでかぶらなくなった。

あとは位置を調整すればよい

div.hogehoge{
    border: 1px solid #000;
    margin-bottom: 25px;
    position: relative;   /* 下位の疑似要素を対象の要素からの相対位置計算にする */
}
div.hogehoge::after{
    content: url(line.png);
    position: absolute;
    left: 50%;            /* 中央寄せ */
}

要素のかぶりが気になるので後ろにおいやる

div.hogehoge{
    border: 1px solid #000;
    margin-bottom: 25px;
    position: relative;
}
div.hogehoge::after{
    content: url(line.png);
    position: absolute;
    left: 50%;
    z-index: -10000;     /* 線の被りを背面へもっていく */
}

最後の要素には線を引きたくないのでここは回避する

div.hogehoge{
    border: 1px solid #000;
    margin-bottom: 25px;
    position: relative;
}
/* hogehoge 最後の要素だけ領域を縮める */
div.hogehoge:last-of-type{
    margin-bottom: 0;
}
 
div.hogehoge::after{
    content: url(line.png);
    position: absolute;
    left: 50%;
    z-index: -10000;
}
/* hogehoge 最後の要素の疑似要素を解除 */
div.hogehoge:last-of-type::after{
    content: none;
}
css/pseudo_elements/add_eseudo_elements_on_target_outer.txt · 最終更新: 2017-01-18 13:16 by ore