CSSは正しく適用されません:: after

Question

私はカスタムクラスを:: afterで使用していますが、すべての要素で適用しているわけではありません。

あなたは（::後の）電子メールの要素が境界線を持っていない見ることができるように。これは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; 
} 

内部の::高さが後に1pxの>に設定されている場合、それは動作します。

Answer 1

問題は、ページにコンテンツを収めるためにズームナビゲータを70％に使用していたことです。確認できるように、ナビゲータは70％のズームで1px divをレンダリングできません。私の悪い。

Answer 2

はい、ズームはトリッキーなことができ、私はここに例報告：これは27pxですので、あなたは30pxに設定し、高さを持つ要素を持っている場合は、90％のズームがうまく動作

が、75のズームこれは22.50ピクセルなので、これ以上はありません。

注意してください！