css 外侧余白の右ボーダー

Posted 2021-05-13

            <dl class="dl_border_style flex_box flex_wrap flex_start">
                <dt>会社名</dt>
                <dd>長崎名水株式会社</dd>
                <dt>住所</dt>
                <dd>〒859-0144 長崎県諫早市高来町溝口214</dd>
                <dt>連絡先</dt>
                <dd>TEL [phone] / FAX [phone]</dd>
            </dl>

.dl_border_style {
    width: 530px;
}

.dl_border_style dt {
    width: 120px;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #cdcdcd;
    padding: 15px;
}

.dl_border_style dt:before {
    content: '';
    position: absolute;
    right: 0;
    display: inline-block;
    width: 1px;
    height: 35px;
    background-color: #cdcdcd;
}

.dl_border_style dd {
    width: 410px;
    box-sizing: border-box;
    border-bottom: 1px solid #cdcdcd;
    padding: 15px 20px 15px 30px;
}

.dl_border_style dt:nth-of-type(01),
.dl_border_style dd:nth-of-type(01) {
    border-top: 1px solid #cdcdcd;
}