html - 我可以使用 :after 在图标集上设置流体宽度吗

Question

我有一个导航，我在 CSS 中使用 :after 设置文本后有图标:

a.pro-serv:after { 
  content: url('../imgs/pro.png'); 
  position: absolute; 
  top: 65px; 
  left: 50%; 
  margin-left: -31px; 
}

我使用绝对定位将它设置为位于文本下方...(是的，它们是大按钮)。但它是一个响应式网站，因此导航元素的宽度缩小，一两个图标太宽，但由于我设置它们的方式，我无法找到改变它们大小的方法，我担心我不能，但我希望有人可能有解决方案，以便图标对不断变化的大小使用react。这甚至可能吗？

非常感谢。

Answer 1

您是否尝试过使用媒体查询来加载较小版本的图标？让背景图像响应是一项艰巨的任务。如果你将它们放入 img 标签中，你将更容易完成它