如何使用CSS3（必要时配合JS）实现行中间绘制线条的效果

我想要了解如何使用CSS3（如有必要可搭配JavaScript）实现上述示例图对应的效果，请问有什么可行的实现思路吗？

所有效果优先用原生CSS3能力实现，仅在鼠标联动类交互需要补充极少量原生JS，不需要依赖重型动画库：

• 基础布局层：直接用Flex/Grid完成页面块级元素的位置排布，不需要额外写浮动、绝对定位的兼容hack
• 静态视觉效果实现：
  • 用backdrop-filter: blur(12px) saturate(150%)实现毛玻璃半透卡片效果，不需要切图制作模糊层
  • 用角向渐变conic-gradient制作卡片边缘的动态高亮边框，配合mask属性把渐变层限制在1px的边框范围内，避免出现实心块
  • 用自定义缓动曲线cubic-bezier(0.22, 1, 0.36, 1)搭配transition属性给所有状态切换加平滑过渡，不需要引入动画库做基础动效
• 交互联动实现：
  • 常规的悬停状态切换（比如卡片上浮、文字颜色变化）直接用:hover伪类完成，不需要写JS监听
  • 鼠标跟随类的光影、视差效果，仅需要写不到30行原生JS，监听目标元素的mousemove事件，把鼠标相对于元素的坐标值赋值给元素的CSS自定义属性，CSS层直接读取属性值控制光影位置、元素的微偏移，实现光标走到哪光影跟到哪的效果
• 兼容性处理：对不支持backdrop-filter的低版本浏览器，给半透元素加带透明度的纯色背景做兜底，不会出现布局错位

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