如何用CSS实现悬停文本时显示的图片自适应移动端与PC端尺寸？

你直接给:focus:after加width:100%没效果，是因为伪元素里的图片作为替换元素，得同时限制伪元素的最大尺寸，才能让图片自适应调整。

直接修改CSS即可，调整后的代码如下：

a.hovertext1:after {
  content: 'Text that appears before I hover.';
}

a.hovertext1:hover:after,
a.hovertext1:focus:after {
  content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
  display: block;
  /* 限制图片最大宽度为视口90%，避免移动端超出屏幕 */
  max-width: 90vw;
  /* 图片宽度占满伪元素可用空间 */
  width: 100%;
  /* 高度自动按比例缩放，防止图片变形 */
  height: auto;
  /* 可选：让图片居中显示 */
  margin: 0 auto;
}

关键修改说明： #

• max-width: 90vw：让图片最大宽度不超过屏幕视口的90%，适配移动端时不会撑满整个屏幕，留边距更美观。
• width: 100%：强制图片宽度填满伪元素的可用空间。
• height: auto：保证图片按原始比例自适应缩放，避免拉伸变形。

修改后，图片在PC端会根据容器宽度自适应调整，移动端则会限制在视口范围内自动适配尺寸。

内容的提问来源于stack exchange，提问作者AO3 user without CSS knowledge