响应式断点下img隐藏bg_img显示时&::after伪元素不显示问题咨询

• 响应式类配置逻辑错误
  UIkit的uk-visible@m规则是仅在视口宽度≥medium断点时显示元素，uk-hidden@m是视口宽度≥medium断点时隐藏元素。你描述的「小于medium视口时img隐藏、bg_img显示」的需求和现有类配置完全相反：你给bg_img加了uk-visible@m，小于medium的视口下bg_img本身就是隐藏状态，伪元素自然无法显示。
  修复：给bg_img配置uk-hidden@m，给img配置uk-visible@m即可匹配需求的显示逻辑。
• 样式语法错误导致伪元素属性失效
  你写的.bg-image的::after伪元素中，width: 80%末尾遗漏了分号，浏览器解析时会把下一行的background-color: #DCCA7E识别为width的无效属性值，导致伪元素的宽度和背景色全部不生效，自然不可见。
  修复：补充分号改为width: 80%;。
• 小屏下高度属性缺失单位
  你在breakpoint(small down)断点下给.bg-image设置的height: 46.72没有加单位（px/vw等），浏览器无法识别该属性值，会导致元素高度为0，绝对定位的伪元素没有定位基准，无法正常渲染。
  修复：补充对应单位，比如改为height: 46.72px;。
• 额外注意点
  img属于替换元素，绝大多数浏览器不支持给img标签添加::before/::after伪元素，你给img写的伪元素规则本身就不会生效，可以直接删除。
  如果修复以上问题后伪元素还是不显示，检查.bg-image的父级容器是否设置了overflow: hidden，或者父级创建了层叠上下文，负z-index的伪元素会被父容器遮挡，可适当调高伪元素的z-index值（比如改为z-index:1，同时调整.bg-image内部内容的z-index确保层级正确）。

内容的提问来源于stack exchange，提问作者mateusloubach