如何用CSS变量引用链接href实现hover自动显示对应图片

嘿，作为CSS新手能想到用变量来简化重复工作真的超棒！先直接给你说结论：纯CSS里没法直接读取元素的href属性或者文本内容来动态生成:after的图片URL——因为CSS本身没有获取DOM属性/文本作为变量值的能力，这部分逻辑得靠JavaScript，但你明确说不能用JS，所以得换几个可行的思路来简化工作。

为什么你的原想法没法实现 #

• CSS变量（比如--assetPath）只能在样式代码里定义，或者通过JavaScript动态设置，没法直接绑定到元素的href属性值——CSS没有“读取DOM属性”的API，所以没法把.link-div-head的href值自动塞到变量里。
• 同样，CSS完全获取不到.itemtext的文本内容，自然没法把文件名转成图片URL。

可行的批量简化方案 #

方案1：利用属性选择器匹配href的规律 #

如果你的.link-div-head的href里包含对应的图片文件名（比如href是/courses/lesson1.html，对应图片是lesson1.jpg），可以用CSS属性选择器来批量匹配，不用给每个项写独立类：

/* 公共样式，所有.itemlink hover:after都复用这个 */
.itemlink:hover:after {
  display: block;
  position: relative;
  zoom: 50%;
}

/* 单独指定每个项的图片URL，通过href包含的关键词匹配 */
.itemlink[href*="lesson1"]:hover:after { content: url("lesson1.jpg"); }
.itemlink[href*="lesson2"]:hover:after { content: url("lesson2.jpg"); }
.itemlink[href*="lesson3"]:hover:after { content: url("lesson3.jpg"); }

这种方式比写独立类要简洁很多，尤其是当文件名和href有明确对应关系的时候。

方案2：用CSS预处理器生成批量代码（最省心） #

如果你能先在本地用Sass/Less这类预处理器写循环，生成对应的CSS代码再上传，就能彻底避免重复劳动。比如用Sass的话，只需要写一段循环代码：

/* 定义所有需要匹配的文件名列表 */
$lesson-names: lesson1 lesson2 lesson3 lesson4 lesson5;

/* 循环自动生成每个项的样式 */
@each $name in $lesson-names {
  .itemlink[href*="#{$name}"]:hover:after {
    content: url("#{$name}.jpg");
    display: block;
    position: relative;
    zoom: 50%;
  }
}

把这段代码放到在线Sass编译器里（随便搜就能找到免费工具），就能自动生成所有需要的CSS规则，直接复制上传就行。对新手来说完全友好，只要改改文件名列表就好。

总结 #

纯CSS没法实现完全自动的动态URL绑定（因为没有读取DOM的能力），但通过属性选择器匹配规律或者预处理器生成代码，可以大幅减少重复工作，不用给每个列表项写独立类选择器。

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