在我的标题和图像后的css边框尺寸

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

我使用的是自引导也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>

但现在我怎么能设置我想要的边框的大小有颜色？在此先感谢！

来源

2017-10-20 Lucas Campos

能否请您添加HTML？您只能设置边框宽度，而不是长度。你将不得不创建一个单独的元素或东西 – zgood

好吧，我编辑并添加此 –

这样你就不能。你必须使用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>

来源

2017-10-20 15:23:18

可以使用伪元素此

试试这个

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

来源

2017-10-20 15:40:32

在我的标题和图像后的css边框尺寸

回答

相关问题