ボーダーボトムの長さを短くする方法は？ html/css

私はdivコンテナ（bootstrap.min.cssのもの）を持っています。 divにはdivborderという別のクラスがあります。 divborderのボーダーボトムは長いですが、どうすればカットできますか？それとも長さを短くするのか？サンプルコード：ボーダーボトムの長さを短くする方法は？ html/css

.divborder { 
 
    border-bottom: 6px solid #C6C4C5; 
 
    /*what should i put here to shorten this border-bottom?*/ 
 
}

<div class="container divborder"> 
 
    <div class="col-md-6"> 
 
    some img 
 
    </div> 
 
    <div class="col-md-6"> 
 
    some texts 
 
    </div> 
 
</div>

出典

2017-10-16 benok

が意図された最終結果の一例を提供するために、より良いかもしれないが、私はあなたがまだ完全にはCSSの境界線の概念を把握してきたとは思わないし、彼らがどのように適用されるか、そう、彼らはですおそらくあなたが探している解決策ではない*。 – UncaughtTypeError

初心者ですからここに写真を投稿できません（しかしここにリンクの例があります：https://i.stack.imgur.com/zs81n.jpg ここではボーダーボトムが短く表示されています。 – benok

これはおそらく国境のプロパティではなく、おそらく '疑似要素 'でしょう - Paulie_Dはあなたの答えで覆われているはずです – UncaughtTypeError

あなたが境界線の実際の長さを変更することはできません。

位置付けされた擬似要素を使用する必要があります。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: rebeccapurple; 
 
    margin: 1em auto; 
 
    position: relative; 
 
} 
 

 
div::after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 10px; 
 
    background: red; 
 
    top: 100%; 
 
    width: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div></div>

出典

2017-10-16 14:18:57

ボーダーボトムの長さを短くする方法は？ html/css

答えて

関連する問題