我的标题和图像之后的 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

这样你就不行了。你必须使用前置元素。示例:

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>