CSSで複数の境界線の色を設定する

Question

CSSで複数の線を境界線にしたいのですが、背景色のイメージを使わずに、以下

参照サンプル：ここに

Answer 1

は、あなたがどのように::beforeと::after擬似要素で動作するように示してsnippetです。

body { 
 
    margin: 2em; 
 
} 
 

 
.TopBorder { 
 
    border-top: 2px solid #36db8b; 
 
    position: relative; 
 
} 
 

 
.TopBorder::after { 
 
    position: absolute; 
 
    left: 50%; 
 
    right: 0; 
 
    top: -2px; 
 
    border-top: 2px solid #cccccc; 
 
    content: ''; 
 
}

<div class="TopBorder "> 
 

 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris 
 
    placerat eleifend leo. 
 

 
</div>

だからあなたは、通常のように一つだけの1つの要素の2つのスタイルを持つことができます（::beforeとの国境の最初の部分）、その後、他の一つは（明らかに::after付き）の後に追加。