如何仅用CSS复刻GitHub仓库语言列表样式？

先给你的HTML结构补充类名，方便样式控制：

<div class="language-list">
  <div class="language-item c">C 90%</div>
  <div class="language-item assembly">Assembly 5.8%</div>
  <div class="language-item makefile">Makefile 2.9%</div>
  <div class="language-item cpp">C++ 0.5%</div>
</div>

然后用CSS实现圆点和整体样式：

.language-list {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #24292f;
  width: 200px; /* 模拟GitHub侧边栏宽度 */
}

.language-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

/* 通用圆点样式 */
.language-item:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

/* 各语言对应颜色（匹配GitHub配色） */
.language-item.c:before {
  background-color: #555555;
}

.language-item.assembly:before {
  background-color: #6E4C13;
}

.language-item.makefile:before {
  background-color: #427819;
}

.language-item.cpp:before {
  background-color: #f34b7d;
}

关键说明： #

• 用:before伪元素生成圆点，通过border-radius: 50%把方块变成圆形
• 给每个语言项加独立类，设置对应背景色，还原GitHub的语言配色
• 用display: flex和align-items: center让圆点和文字垂直居中，保持排版整齐
• 字体和字号参考GitHub的默认样式，让视觉效果更贴近

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