如何通过CSS实现鼠标悬停时在Div左侧显示SVG？

你可以通过CSS伪元素结合:hover状态实现这个效果，无需修改现有HTML结构，具体方案如下：

完整代码示例 #

HTML（保留你的原有结构） #

<div class="text" id="text_swlu3or4flh" contenteditable="true">This is some text</div>

CSS #

.text {
  /* 设置相对定位，让伪元素可基于该div定位 */
  position: relative;
  /* 给左侧预留SVG空间，避免悬停时文字被挤压 */
  padding-left: 30px;
  /* 可选：添加基础样式提升视觉效果 */
  padding: 8px 12px;
  width: fit-content;
  border: 1px solid #eee;
}

/* 定义左侧SVG伪元素 */
.text::before {
  content: '';
  /* 示例SVG（编辑图标），可替换为你需要的SVG转成的Data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  /* 设置伪元素尺寸 */
  width: 20px;
  height: 20px;
  /* 定位到div左侧居中位置 */
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  /* 默认隐藏 */
  opacity: 0;
  /* 添加平滑过渡动画 */
  transition: opacity 0.2s ease;
}

/* 鼠标悬停时显示SVG */
.text:hover::before {
  opacity: 1;
}

关键说明 #

• 用::before伪元素插入SVG，无需额外HTML标签
• 通过相对+绝对定位组合，将SVG精准固定在div左侧居中处
• 利用opacity控制显示/隐藏，配合transition实现平滑过渡
• 提前设置padding-left避免SVG显示时挤压文字
• 可替换示例中的SVG Data URI为你需要的图标（可通过在线工具将SVG代码转换为Data URI）

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