CSS가 다음에 적용되지 않음 ::

-1

다음과 같은 맞춤 클래스가 있지만 모든 요소가 적용되지는 않습니다.CSS가 다음에 적용되지 않음 ::

당신이 (:: 후) 이메일 요소가 국경을하지 않은 볼 수 있듯이. Chrome과 Firefox에서 모두 발생합니다.

이

은 각 요소에 대한 HTML입니다 :

<div class="content-contact-info"> 
    <div class="content-contact-info-icon"> 
     <img src="https://cpanel.appmatic.nulltilus.com/images/icons/controlpanel/gallery/ic_info_black_48dp.png"> 
    </div> 

    <div class="content-contact-text"> 
     <div class="content-contact-info-title"> 
      Las copas gemelas 
     </div> 
the ::after 
     <div class="content-contact-info-subtitle"> 
      Carrer de Xàtiva, Valencia 
     </div> 
    </div> 
</div>

그리고 이것은 CSS입니다 :

.mobile-container > .mobile-content .content-contact-info { 
    width: 100%; 
    height: 120px; 

    display: flex; 
    flex-flow: row wrap; 

    position: relative; 

    padding: 14px 0; 
} 

.mobile-container > .mobile-content .content-contact-info::after { 
    content: ''; 

    width: 600px; 
    height: 1px; 

    margin-left: calc(100% - 600px); 

    background-color: #CCCCCC; 
} 

.mobile-container > .mobile-content .content-contact-info > .content-contact-info-icon { 
    width: 120px; 
    height: 120px; 

    padding: 25px; 
} 

.mobile-container > .mobile-content .content-contact-info > .content-contact-info-icon > img { 
    max-width: 100%; 
} 

.mobile-container > .mobile-content .content-contact-info > .content-contact-text > .content-contact-info-title, .mobile-container > .mobile-content .content-contact-info > .content-contact-text > .content-contact-info-subtitle { 
    max-width: 500px; 
    height: 60px; 
} 

.mobile-container > .mobile-content .content-contact-info > .content-contact-text > .content-contact-info-title { 
    padding-top: 30px; 
} 

.mobile-container > .mobile-content .content-contact-info > .content-contact-text > .content-contact-info-subtitle { 
    color: #797979; 
    font-size: .7em; 
    text-overflow: ellipsis; 

    padding-top: 7px; 
}

내부의 높이가 :: 후 설정에> 1 x 1 픽셀, 작동합니다.

출처

2017-11-26 legomolina

위치 : absoulte on : after 요소 다음에 올바른 위치를 선택하기 위해 상단 및 letf를 사용하십시오. – JiiB

위치와 동일한 결과 : 절대 – legomolina

제공 한 코드로 codepen을 만들었지 만, 놓친 것 같아요. 일부 CSS https://codepen.io/alezuc/pen/wPxoEq 전체 HTML 및 CSS를 제공하십시오 – Alessio

-1

좋아, 문제는 제가 페이지 (테스트)에 콘텐츠를 맞추기 위해 70 %까지 줌 네비게이터를 사용하고 있었고 볼 수 있듯이 탐색기가 70 % 줌으로 1px div를 렌더링 할 수 없다는 것이 었습니다. 내 잘못이야.

가 가

출처

2017-11-26 00:43:12 legomolina

예, 줌 까다로울 수있다, 내가 여기 예를 들어 보고서 : 당신이 30 픽셀로 설정 높이 요소가있는 경우

을, 다음 90 % 줌이 27px 때문에, 작품을 좋아하지만, (75)의 줌 이 값은 22.50 px이므로 더 이상 %는 아닙니다.

주의하십시오!

출처

2017-11-26 08:50:14 Alessio

CSS가 다음에 적용되지 않음 ::

답변

관련 문제