모바일에서 의사 요소가 사라집니다.

약 about : :: before 및 after : 약 내 페이지의 텍스트에 밑줄을 긋기 위해 pseudo elements :: http://www.alexanderschlosser.de/wordpress/about을 사용하고 있습니다.모바일에서 의사 요소가 사라집니다.

모든 이상한 이유로 모든 것이 데스크톱에서 훌륭하게 작동하지만 내 iPhone에서 사용하는 모바일 브라우저가 무엇이든 밑줄이 표시되지 않습니다. 또는 그들은 실제로 잠깐 동안 나타나지만 나중에 사라집니다.

내비게이션에 똑같은 CSS 스타일링을 사용하면 모든 장치의 링크가 완벽하게 작동하므로 더 이상하지 않습니다.

어떤 문제일까요?

는 _

다음은 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;*/ 
}

출처

2017-11-02 Alex

그것은 당신이 그들을 위해 설정 한 Z-지수입니다. 값을 0으로 변경하면 예상대로 작동합니다.

출처

2017-11-02 16:08:17 Seb

고맙습니다. – Alex

안녕하세요, 그냥 생각이 들었습니다.':: before'와':: after' 두 가지를 사용하는 대신,'border-bottom : 1px solid # 000;'이있는':: after' 만 사용하십시오. 'visibility' 속성을 지우고 백그라운드 색상을': hover'에서 녹색으로 바꿉니 까? 그게 당신이 가지고있는 레이어 계층 구조 문제를 해결해야합니다. – Seb

좋은 지적 - 다시 한번 감사드립니다! 너 나 많이 도와 줬어! – Alex

모바일에서 의사 요소가 사라집니다.

답변

관련 문제