Css边框底部宽度

我试图在我的页脚（共有4列）的每个h4标题下画一条下划线。我提出了以下css，部分实现了我的目标

.views-col.col-1 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 40%;
}
.views-col.col-2 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 50%;
}
.views-col.col-3 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 50%;
}
.views-col.col-4 h4{
text-decoration: none;
border-bottom: 4px solid green;
width: 50%;
}

但是，我需要在Css代码中重复4次。这可以简化为一条规则吗？此外，还有更好的方法在每个标题下加下划线

---

非常感谢

对于您的情况，我们可以很容易地将其简化为两个模块

.views-col h4 {
  text-decoration: none;
  border-bottom: 4px solid green;
  width: 50%;
}

.views-col .col-1 h4 {
  width: 40%;
}

还有一个解决方案：

.视图列[class*=列-]h4{ 文字装饰：无； 边框底部：4倍纯绿； 宽度：50%； } .views-col.col-1H4、.views-col.col-2H4、.views-col.col-3H4、.views-col.col-4H4{…}或以这种方式为h4指定一个类和目标。