Question

尝试对旧开发人员的工作进行问题排查...我们公司网站link上的标题CSS内容并未仅显示边框线。在移动设备上它看起来很好。

hr.aboutUs {padding：0; border：none; border-top：1px solid＃808080;颜色：＃808080; text-align：center; }

hr.aboutUs :: after {content：“About Us”; display：inline-block;位置：相对;顶部：-0.7em; font-size：1em; font-weight：bold;填充：0 0.75em;背景：白色; }

***它在Safari和Firefox上显示，但不是Chrome

Answer 1

您必须在针对桌面设备的媒体查询中声明hr.aboutUs:after。

@media all and (max-width: 806px) {
    hr.aboutUs:after {
        content: "About Us";
        display: inline-block;
        top: 1.5em;
        font-size: 1em;
        font-weight: bold;
        padding: 0 0.75em;
        background: white;
        z-index: 10000;
        position: absolute;
        left: 22.5em;
    }
}

确保在第589行之后添加。

希望这会有所帮助。：）

CSS内容文本消失但在移动设备上运行

1 个答案: