Css Border-bottom-width

Question

I am trying to get an underline under each of my h4 headings in my footer which has 4 columns. I have come up with the following css which partially accomplishes my goal.

.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%;
}

However I will need to repeat this 4 times in my Css code. Can this be simplified to fit into 1 rule? and additionally is there a better way to have an underline under each heading.

Many thanks

Answer 1

One more solution:

.views-col[class*="col-"] h4 {
    text-decoration: none;
    border-bottom: 4px solid green;
    width: 50%;
}

Answer 2

In your case we can easily simplify it to two blocks.

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

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