时间戳

首页 > 解决方案 > 在 CSS 中，如何创建一个类以将填充放在带下划线的标题下方？

css - 在 CSS 中，如何创建一个类以将填充放在带下划线的标题下方？

问题描述

我有一个特定于上下文的类，我想要网站上的某些标题，我正在使用以下代码在标题下应用 2px 全宽线：-

.headingCustom2 {
  
  color:black; 
  text-align: center; 
  padding-top: 50px; 
  border-bottom: 2px solid #000; 
  padding-bottom: 3px;

}

我想在下划线下方添加 20px 填充，以便它和下面的 div 之间有空间。它需要独立于 padding:bottom。我的搜索只返回了 padding-bottom 的结果，它改变了标题和下划线之间的距离。想要将其保留在一个不同的类别中，因为整个站点需要应用很多标题。标题字体 Heading 5 也用于其他无下划线的上下文中。无论如何，我希望这个问题不会太烦人。

标签： csswordpresstypography

解决方案

您可以尝试使用 ::after

.headingCustom2::after {
    content: '';
    display: block;
    height: 20px;
}

推荐阅读