我有:before和:after伪元素。当媒体规则的屏幕宽度为max-width:760px时,我需要更改这些设置。
当最大宽度为760或>时,我应该看到不同的图形,但文本内容的:before和:after相同。
我看到了新的图形,但显示了元素前后的:before。
我尝试在@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');}
}
答案 0 :(得分:-1)
您错过了媒体规则的括号:
@media all and (max-width:760px) {
#infoGraph{content: url('/site_images/new-graphic.png');}
}