创建一个：after元素/ div

Question

我想在h3标题下创建一个底栏。由于缺乏调整功能，我不想使用border-bottom。我也无法完全控制何时创建h3标题，因此我可以在我的html中使用div。

我想要的是

CSS

.page-widgt h3 {
  position: relative;
  font-weight: 700;
  color: #42b4c4;
  font-size: 2em;
  letter-spacing: -1px;
  line-height: 1em;
  margin-bottom: 25px;
  padding: 0 30px 15px 0;
}

.page-widgt h3:after {
  position: relative;
  display: block;
  width: 50px;
  height: 3px;
  background-color: #000;
}

但没有出现

Answer 1

为content:""

添加:after

.page-widgt h3:after {
  position: relative;
  display: block;
  width: 50px;
  height: 3px;
  background-color: #000;
  content:"";
}