Css 未正确应用于 ::after答案

【问题标题】：Css not applying to ::after correctlyCss 未正确应用于 ::after
【发布时间】：2017-11-26 00:16:25
【问题描述】：

我有一个带有 ::after 的自定义类，但并非所有元素都应用了它。

如您所见，电子邮件元素没有边框（::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;
}

如果 ::after 内的高度设置为 > 1px，它可以工作。

【问题讨论】：

尝试在 :after 元素上使用 position: absoulte ，然后使用 top 和 letf 选择正确的位置
与位置相同的结果：绝对
我已经用你提供的代码创建了一个 codepen，但我猜你错过了一些 CSS codepen.io/alezuc/pen/wPxoEq 请提供完整的 HTML 和 CSS
是的，电子邮件 html 和/或 css 丢失了。
这是全html和css的笔codepen.io/anon/pen/YEjpdq内容通过js加载

标签： html css pseudo-element

【解决方案1】：

是的，缩放可能很棘手，我在这里举个例子：

如果您有一个高度设置为 30 像素的元素，那么 90% 的缩放可以正常工作，因为这是 27 像素，但不再是 75% 的缩放，因为这是 22.50 像素。

小心！

【讨论】：

【解决方案2】：

好的，问题是我使用缩放导航器到 70% 以适应页面中的内容（测试），正如我所见，导航器无法以 70% 的缩放呈现 1px div。我的错。

【讨论】：