如何使用CSS实现文本旁的装饰线条效果？

安全阿岳

2026-10-2

我不清楚该如何描述这种效果，因此附上截图供参考：

你截图里的是代码编辑器的悬浮代码提示效果，鼠标悬停在变量、函数等代码节点上时，会弹出带语法高亮的定义、类型、说明信息。
不同场景下的实现方案如下：

VS Code扩展开发场景

直接调用官方提供的Hover Provider API即可实现，返回的浮层内容支持带语法标注的Markdown代码块，会自动渲染高亮效果：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册对应语言的悬浮提示提供者
  const hoverDisposable = vscode.languages.registerHoverProvider(
    // 这里替换为你要适配的语言ID，比如javascript、python
    'javascript',
    {
      provideHover(document: vscode.TextDocument, position: vscode.Position) {
        // 你可以在这里先解析当前光标位置的代码内容，匹配对应的提示信息
        const hoverContent = new vscode.MarkdownString();
        // 追加带语法高亮的代码块，第二个参数指定语言ID
        hoverContent.appendCodeblock(`function getUserInfo(id: number): User {
  return { id, name: '张三', age: 20 }
}`, 'typescript');
        // 追加普通说明文本
        hoverContent.appendMarkdown('\n获取指定ID的用户基础信息，返回值包含id、姓名、年龄三个字段。');
        return new vscode.Hover(hoverContent);
      }
    }
  );
  context.subscriptions.push(hoverDisposable);
}