css - 媒体查询进行更改时不显示伪元素

Question

我有 :before 和 :after 伪元素。当媒体规则的屏幕宽度为 max-width:760px 时，我需要更改这些。

当最大宽度为 760 或 > 时，我应该看到不同的图形但相同的 :before 和 :after 文本内容。

我看到了新图形，但没有看到 :before 和 after 元素显示。

我尝试在 @media all 和 (max-width:760px) 下的 CSS 中添加 :before 和 after 伪元素，但没有任何成功。

有谁知道为什么这不显示？

CSS

#infoGraph::before {width:100%; content:"Did you know..."; line-height:3rem; font-weight:bold; font-variant-caps:all-small-caps; font-size:1.4rem; margin-top:1.5rem;}
#infoGraph::after {width:100%;content:"Full text here..."; font-style:italic; font-size: 0.8rem}
#infoGraph {width:100%}
#infoGraph img {width:100%}

@media all and (max-width:760px){
#infoGraph{content: url('/site_images/new-graphic.png');}
}

标签： css

Answer 1

您缺少媒体规则周围的括号：

@media all and (max-width:760px) {
  #infoGraph{content: url('/site_images/new-graphic.png');}
}