如何在FontAwesome图标fa-circle上添加水平居中线条及菜单悬停边框居中

嘿，我来帮你搞定这两个问题～

想要在圆形图标中间加一条水平居中的线？用伪元素就能轻松实现，不用叠加额外图标。具体做法如下：

先给图标套一个定位容器，再用::after伪元素创建线条，通过绝对定位让它精准居中：

HTML代码：

<span class="circle-line-icon"><i class="fa fa-circle"></i></span>

CSS代码：

.circle-line-icon {
  position: relative;
  display: inline-block; /* 让容器和图标同宽 */
}

.circle-line-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%; /* 调整这个值控制线条左右边距，避免超出圆形 */
  right: 15%;
  height: 2px; /* 线条粗细 */
  background-color: #333; /* 线条颜色，按需修改 */
  transform: translateY(-50%); /* 垂直居中 */
}

你可以根据需求调整left/right的值改变线条长度，或者直接设置固定width后用left: 50%; transform: translateX(-50%)来居中，两种方式都好用～

你之前用text-align: center和align-content没效果很正常，因为border-top默认会撑满整个链接元素的宽度，这两个属性对边框完全不起作用。要实现居中的短线条，得换用伪元素来做：

修改你的原有代码，给链接添加相对定位，然后用伪元素创建hover时的水平条：

修改后的完整CSS：

nav ul { 
  list-style-type: none; 
  display: flex; 
}
nav li { 
  margin-right: 15px; 
  margin-top: 5px; 
}
nav a { 
  font-size: 1.1em; 
  color: #181818; 
  padding-right: 20px; 
  padding-top: 30px; 
  text-decoration: none; 
  position: relative; /* 新增：让伪元素基于链接定位 */
}
nav a:hover { 
  color: black; 
  /* 去掉原来的border-top，改用伪元素 */
}
/* 新增hover时的居中水平条 */
nav a:hover::before {
  content: '';
  position: absolute;
  top: 0; /* 对应原来border-top的位置，因为padding-top是30px，所以top:0就是顶部 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: 60px; /* 线条宽度，按需调整 */
  height: 3px;
  background-color: #3691b0; /* 和你原来的border颜色一致 */
}

这样hover时就会在链接顶部显示一条居中的短线条，你可以调整width来改变线条长度，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Estelle D.