다음과 같은 맞춤 클래스가 있지만 모든 요소가 적용되지는 않습니다.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 픽셀, 작동합니다.
위치 : absoulte on : after 요소 다음에 올바른 위치를 선택하기 위해 상단 및 letf를 사용하십시오. – JiiB
위치와 동일한 결과 : 절대 – legomolina
제공 한 코드로 codepen을 만들었지 만, 놓친 것 같아요. 일부 CSS https://codepen.io/alezuc/pen/wPxoEq 전체 HTML 및 CSS를 제공하십시오 – Alessio