How to increase border-bottom width?

Asked

Viewed 88 times

0

  • How to increase the border-bottom where the arrow points : inserir a descrição da imagem aqui

Code: 

.container__transacoes > h3{  
border-bottom: 1px solid #bbb; /*Ver como aumentar as bordas*/
padding-bottom: 10px;
margin: 30px 0px 10px;
margin-right: 190px;
}
.transacoes{
list-style-type: none;
padding: 0;
margin: 40px;
}
.transacoes li {
background-color: #fff;
box-shadow: var(--box-shadow);
color: #333;
display: flex;
justify-content: space-between;
position: relative;
padding: 10px;
margin: 10px 0;
}
.transacoes li.plus {
border-right: 5px solid #0EC206;
}
  
.transacoes li.minus {
border-right: 5px solid red;
}
<div class="container__transacoes">

<h3>Transações</h3>

<ul id="transacoes" class="transacoes"></ul>

<h3>Adicionar Transações</h3>
</div>

html5 css3

  • It’s not just putting border-bottom: 10px solid #bbb; ? or border-bottom-width: 15px? You set the size o in pixel, as you wish...

  • I kind of asked wrong, it wasn’t to increase the width , but rather the size of it up to where the arrow is pointing, you can help me ?

  • Okay. I reopened the question. But I suggest you edit the title, to be more descriptive.

  • I helped with the editing. What’s on .container_transacoes? I think it might be the answer to find out why it doesn’t go all the way. I suggest you paste the CSS snippet from this div.

  • I changed here ,,,

1 answer

0


Dude is not going to the end because you put one margin-right of 190px in the H3

inserir a descrição da imagem aqui

The way the H3 occupies the entire line, minus the width of that margin Ai, just remove it to get 100%

.container__transacoes > h3{  
border-bottom: 1px solid #bbb; /*Ver como aumentar as bordas*/
padding-bottom: 10px;
margin: 30px 0px 10px;
/* margin-right: 190px; */
}
.transacoes{
list-style-type: none;
padding: 0;
margin: 40px;
}
.transacoes li {
background-color: #fff;
box-shadow: var(--box-shadow);
color: #333;
display: flex;
justify-content: space-between;
position: relative;
padding: 10px;
margin: 10px 0;
}
.transacoes li.plus {
border-right: 5px solid #0EC206;
}
  
.transacoes li.minus {
border-right: 5px solid red;
}
<div class="container__transacoes">

<h3>Transações</h3>

<ul id="transacoes" class="transacoes"></ul>

<h3>Adicionar Transações</h3>
</div>

  • Thank you Hugo :) , I put the Width:100% and it was all right , I am sad to know that your answer was good and still slipped into it , should have in stackoverflow a mechanism that you can report people who slipped for no reason

  • @Valdenirsonpereira has no problem, the negative vote changes nothing, I am happy to have helped, you accepted the answer, and I know I helped with something correct. Actually, I’m sorry the guy voted negative and thought it would change something haha. I’m gonna walk out of here with 23pt and you with the problem solved, and what does Downvote stand for? Nothing :D, it would be better if he tried some better answer or made a constructive comment, is a vote thrown in the trash...

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.