如何用CSS实现示例图中的奇幻风格底部边框/线条？

要实现字体图标底部这种中间清晰、两边渐隐的线条，不用radial-gradient，用linear-gradient搭配伪元素是更简单直观的方案，以下是具体实现：

方法一：线性渐变+伪元素（推荐） #

给字体图标外层加个容器，通过伪元素生成底部线条，不影响图标本身样式：

/* 字体图标容器 */
.icon-wrap {
  position: relative;
  font-size: 32px; /* 图标大小 */
  color: #333; /* 图标颜色 */
  padding-bottom: 10px; /* 给线条预留空间 */
  display: inline-block; /* 适配图标宽度 */
}

/* 底部渐变线条 */
.icon-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px; /* 线条总宽度 */
  height: 1px;
  /* 从左到右：透明→目标颜色→透明，实现渐隐效果 */
  background: linear-gradient(to right, transparent, #fafafa, transparent);
}

方法二：调整径向渐变参数 #

如果坚持用radial-gradient，需要把渐变形状改成椭圆，调整尺寸参数来匹配线条效果：

.icon-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  /* 椭圆径向渐变，中心位置，宽度60px高度2px的椭圆范围 */
  background-image: radial-gradient(ellipse 60px 2px at center, #fafafa 0%, transparent 100%);
}

两种方法都能实现你要的底部线条效果，第一种线性渐变的方式更容易调整宽度和渐变程度。

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