私のタイトルと画像の後ろのCSSの罫線のサイズ

Question

CSSを使用してこのイメージに示されているスタイリングを実装しようとしています。私の問題は、タイトル "nossos numeros"の上に水平の黄色の線を作る方法と、 "Cursos"、 "Alunos"と "Aulas"の間の垂直の青い線を作る方法です。私は私が欲しい4.

をブートストラップも使用してい

この：

この私がやった：

<section class="bg-light" id="portfolio" style="background-color: #ffffff;"> 
    <div class="container-fluid"> 
    <div class="row text-center"> 
     <div class="col-sm-3"> 
     <p class="font-square2" style="border-top: 5px yellow solid;"> 
     NOSSOS <br> &nbsp;&nbsp;NÚMEROS</p> 
     </div> 
     <div class="col-sm-3" style="padding-top: 50px; border-right: 1px blue solid; "> 
     <img class="img-fluid" src="img/icone_cursos.png"> 
     <div class="portfolio-caption"> 
      <p class="font-square"> 1123 </p> 
      <p class="font-square"><strong>Cursos</strong></p> 
     </div> 
     </div> 
     <div class="col-sm-3" style="padding-top: 50px; border-right: 1px blue solid;"> 
     <img class="img-fluid" src="img/icone_alunos.png"> 
     <div class="portfolio-caption"> 
      <p class="font-square"> 34534 </p> 
      <p class="font-square"><strong>Alunos</strong></p> 
     </div> 
     </div> 
     <div class="col-sm-3" style="padding-top: 65px;"> 
     <img class="img-fluid" src="img/icone_aulas.png"> 
     <div class="portfolio-caption"> 
      <p class="font-square"> 4566 </p> 
      <p class="font-square"><strong>Aulas</strong></p> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

が、今どのように私ができます私が望むボーダーのサイズを設定する色付きで？ ありがとうございます！

Answer 1

このようにすることはできません。 preudoelementsを使う必要があります。例：

div { 
    width : 200px; 
    height : 50px; 
} 

div:before { 
    content : ""; 
    position: absolute; 
    left : 0; 
    bottom : 0; 
    height : 1px; 
    width : 50%; 
    border-bottom:1px solid yellow; 
} 
<div>Item 1</div> 
<div>Item 2</div> 

Answer 2

あなたは、あなたのHTMLを追加してくださいすることができ、この

#fortopborder:before { 
    height: 10px; 
    display: block; 
    width: 100px; 
    background: red; 
    content: ''; 
} 

#forrightborder:after { 
    display: block; 
    content: ''; 
    background: blue; 
    Width: 10px; 
    height: 100px; 
    margin-top: -120px; 
    Float:right; 
}