css边框大小超过我的标题和图像后

Question

我在尝试使用CSS实现此图像中显示的样式时遇到问题。我的问题是如何在标题“nossos numeros”和“Cursos”，“Alunos”和“Aulas”之间的垂直蓝线上制作水平黄线。

我也在使用Bootstrap 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

您可以为此

使用伪元素

试试这个

#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;
}