CSS 見出しの下に横幅いっぱいに罫線を引く

  • 解決済 zen73

    (@zen73)


    8年、 4ヶ月前

    見出しの装飾のために，見出しの下に見出し文の横幅を超えて幅いっぱいに罫線をひきたいとおもっています。下のコードはweb上で探して使わせていただいたものです。
    見本としての画像には文字幅を超えて横幅いっぱいに罫線が引かれていますが，なぜか見出しの下だけに罫線が引かれています。
    border-bottom: 2px solid #B92A2C;に代わるものがあるかと探しましたが，ありませんでした。

    hs{
    position: relative;
    font-size: 1.07em;
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.1em 2.0em;
    border-bottom: 2px solid #B92A2C;
    }
    hs:after{
    content: "□";
    font-size: 110%;
    position: absolute;
    color: #B92A2C;
    top: 0.5em;
    left: 0.5em;
    height: 12px;
    width: 12px;
    }

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック投稿者 zen73

    (@zen73)

    8年、 4ヶ月前

    見出し
    ―――――――――――――――――――――――――――――
    と表示したいのに

    見出し
    ―――
    としか表示されないわけを検証するためにCSSをより単純に書き直してみましたが状況に変化はありませんでした。

    tp2 {
    border-bottom:2px solid #5285C2;
    }

    Honda

    (@rocketmartue)

    8年、 4ヶ月前

    htmlとcssの組み合わせがどうなっているかが分からないのですが、見出しが、インライン要素になっているのでは？
    cssには、ブロック要素とインライン要素があります。
    css ブロック要素 インライン要素

    それからtp2は、idかclassだと思うのですが、idの場合は、#tp2
    classの場合は、.tp2と書かないとダメです。

    .tp2 {
border-bottom:2px solid #5285C2;
display: block;
}

    にすると、どうなりますか？
    これでダメな場合は、tp2の親要素にdisplay: inline-block;などの指定があるかもしれません。

    トピック投稿者 zen73

    (@zen73)

    8年、 4ヶ月前

    RocketMatureさん，いつもありがとうございます。お陰様でやりたいことを実現することができました。
    <h4 class=”tp4″>あいうえお</h4>

    h4.tp4{
    border-top:1px solid #D3D3D3;
    border-bottom:2px solid #993366;
    padding: 6px 0 2px 0;
    display: block;
    }
    `

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「CSS 見出しの下に横幅いっぱいに罫線を引く」には新たに返信することはできません。