Css Border-bottom-width

Question

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回繰り返す必要があります。これを1つのルールに合わせて簡略化することはできますか？さらに各見出しの下に下線を付ける方が良い方法です。

多くのお礼ありがとうございます

Answer 1

もう一つの解決策：

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

Answer 2

あなたの場合、2つのブロックに簡単に簡略化できます。

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

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