divの片面に多色の境界線があります

Question

this example私は何をしたいのか分かりましたが、divの上部にあります。私はCSSの中で何がトップにあるのか、ボトムボーダーにするには何を修正する必要があるのか​​分かりません。それは後にする前に切り替えることだろうと思ったが、それはそのような100%に.box:afterに

body { 
    background: #ccc; 
} 

.box { 
    text-align: center; 
    position: relative; 
    line-height: 100px; 
    background: #fff; 
    height: 100px; 
    width: 300px; 
} 

.box:after { 
    background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); 
    position: absolute; 
    content: ''; 
    height: 4px; 
    right: 0; 
    left: 0; 
    top: 0; 
} 

<div class="box">Div</div> 

Answer 1

ボーダーが:after擬似要素です。あなたが.box:afterにbottomにtopを変更した場合、それは下

bottom: 0;へ

body { 
 
     background: #ccc; 
 
    } 
 
    
 
    .box { 
 
     text-align: center; 
 
     position: relative; 
 
     line-height: 100px; 
 
     background: #fff; 
 
     height: 100px; 
 
     width: 300px; 
 
    } 
 
    
 
    .box:after { 
 
     background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); 
 
     position: absolute; 
 
     content: ''; 
 
     height: 4px; 
 
     right: 0; 
 
     left: 0; 
 
     bottom: 0; 
 
    }

<div class="box">Div</div>

Answer 2

変更トップを動作しませんでした：

.box:after { 
    top: 100% 
} 

Answer 3

変更top: 0;に枠を移動します、絶対にそうtop、right、およびleft

に配置されていますそれを底に追加します。

なぜなら、それは絶対配置され、上/右/下/左が要素の配置先を指定するからです。

Answer 4

.box:after pseudoelementがあなたのためにあまりにも複雑である場合は、ここでボーダー-画像を使用して代替です。

Border-image-sliceCSSボーダー画像勾配を拡張します。

body { 
 
    background: #ccc; 
 
} 
 

 
.box { 
 
    text-align: center; 
 
    position: relative; 
 
    line-height: 100px; 
 
    background: #fff; 
 
    height: 100px; 
 
    width: 300px; 
 
    border-bottom: 4px solid transparent; 
 
    border-image: linear-gradient(to right, #bcbcbc 25%, #ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); 
 
    border-image-slice: 1; 
 
}

<div class="box">Div</div>

Answer 5

あなただけの "CSSで何が一番上になるようにそれを言っている"

.box:after { 
    bottom: 0;//it is replaced by top:0; 
} 

Answer 6

body { 
background: #ccc; 
} 

.box { 
text-align: center; 
position: relative; 
line-height: 100px; 
background: #fff; 
height: 100px; 
width: 300px; 
} 

.box:after { 
background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, 
#e84f47 50%, #e84f47 75%, #65c1ac 75%); 
position: absolute; 
content: ''; 
height: 4px; 
right: 0; 
left: 0; 
top: auto; 
bottom:0; 
} 

Answer 7

あなたのCSS topプロパティを置き換える - 右：0;左：0;トップ：0;要素の絶対位置は

"と私は下の境界線を取得するために変更する必要があります。 -

変更要素の位置 - 右：0;左：0;下：0;

<div class="box">Div</div> 

<style> body { background: #ccc} 
     .box { 
      text-align: center; 
      position: relative; 
      line-height: 100px; 
       background: #fff; 
      height: 100px; 
      width: 300px; 
       } 

     .box:after { 
       background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, 
      #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); 
       position: absolute; 
      content: ''; 
      height: 4px; 
      right: 0; 
      left: 0; 
      bottom: 0; 
      } 
    </style>