擬似要素(::after, ::before)のz-indexが思い通りにいかない場合の対処法

#結論
###z-indexをマイナスの値にする。

#z-indexがプラスの値、または０の場合

####CSS

body {
    margin: 0;
}

.hello {
    position: relative;
    font-weight: bold;
    font-size: 60px;
    line-height: 1;
    padding-left: 10px;
    z-index: 1;
}

.hello::after {
    position: absolute;
    content: "";
    top: 30px;
    left: 0;
    width: 180px;
    height: 35px;
    background: lightgreen;
    z-index: 0; /* ←ここが原因 */
}

###↓

#z-indexがマイナスの値の場合

####CSS

body {
    margin: 0;
}

.hello {
    position: relative;
    font-weight: bold;
    font-size: 60px;
    line-height: 1;
    padding-left: 10px;
    z-index: 1;
}

.hello::after {
    position: absolute;
    content: "";
    top: 30px;
    left: 0;
    width: 180px;
    height: 35px;
    background: lightgreen;
    z-index: -1; /* ←マイナスの値にする */
}

###↓

#参考URL
z-index :after　:before　で装飾したとき親要素を一番上にする
http://noanoa.bangofan.com/html%E3%80%81css/z-index%20-after%E3%80%80-before%E3%80%80%E3%81%A7%E8%A3%85%E9%A3%BE