文本和边框底部之间的空间

Question

如何在文本下方创建文本和边框之间的距离，如使用sass / css附加的图像所示？

我希望距离为5px，文本的字体大小为15px。

我试过

.selected {
  color: #284660;
}
.selected:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  bottom: 5px;
  border-bottom: 2px solid #284660;
}

但是这创造了一个太宽的边界。

Answer 1

我觉得上面几段内容可以改进。

1. 您可能不需要psuedo元素以达到预期的效果
2. 如果您想使用伪相元素
，则不应使用绝对定位

无论如何，你可以尝试一下。

&.selected {
color: #284660;
border-bottom: 2px solid #284660;
padding-bottom:10px ; // this should give you some spacing.
}

Answer 2

尝试否定

{

底部：-5px;

}

Answer 3

除了完全缺乏对您的DOM配置文件的了解或&引用的元素之外，如果您只是在inline元素上拍打边框和填充，您将获得所需的效果

无需使用伪元素。

<span style="padding-bottom:5px; border-bottom:2px solid black;">Some Text</span>

显然，您应该将该样式信息放在css文件中，我只是为了示例而将其内联。

哦，下次，请在示例CSS中包含示例HTML。我之所以烦恼的唯一原因是因为解决方案就像“什么是padding 15，Trebek一样简单？”