モバイルで擬似要素が表示されない

Question

私は擬似要素:: beforeと:: afterを使って私のaboutページのテキストに下線を付けています：http://www.alexanderschlosser.de/wordpress/about。

いくつかの奇妙な理由で、すべてがデスクトップ上でうまく動作しますが、私のiPhoneで使用するモバイルブラウザに関係なく、下線は表示されません。または、実際には1秒ごとに表示されますが、その後は消えます。

メインナビゲーションでは全く同じCSSスタイルを使用しているため、すべてのデバイス上のリンクでも問題なく機能します。

何が問題なのでしょうか？

_

ここではそれはあなたが彼らのために設定したZインデックスのCSS

.linkBio::before { 
    content: ""; 
    position: absolute !important; 
    z-index: -1 !important; 
    width: 100%; 
    height: 1px; 
    bottom: -1px; 
    left: 0; 
    background-color: #252526; 
} 

/*CREATE COLORED BACKGROUND AND HIDE IT*/ 
.linkBio::after { 
    content: ""; 
    position: absolute !important; 
    z-index: -2 !important; 
    width: 100%; 
    height: 100%; 
    bottom: 0px; 
    left: 0; 
    background-color: #DFFAD6; 
    visibility: hidden; 
    /*opacity: 0; 
    -webkit-transition: all 0.05s ease-in-out 0s; 
    transition: all 0.05s ease-in-out 0s;*/ 
} 

/*SHOW COLORED BACKGROUND ON HOVER*/ 
.linkBio:hover::after { 
    visibility: visible; 
    /*opacity: 1;*/ 
} 

Answer 1

です。それらを0に変更し、期待どおりに動作します。