【CSS】下線部を追加

方法

①擬似要素の利用

• html

<div class="head_home">
  <h2 class="ttl">ABOUT.</h2>
</div>

• css

.head_home .ttl {
    font: 500 56px/1em "Futura PT"; 
    line-height: 1.28;
    position: relative;
}

.head_home .ttl:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    background: #0cf;
    bottom: 0;
    left: 0;
}

②pタグの利用

• html

<h2 class="headline-sm">1.</h2>
<p class="headline-border"></p>

• css

.headline-border {
    height: 5px; /* 線の太さ */
    width: 40px; /* 線の長さ */
    background: #1BC8B7; /* 線の色 */
    margin-top: -15px;   /* 少し上へ */
}