CODEWITHSUNDEEP
htmlcssborder
a7dc
a7dc

Reputation: 3416

How to create a responsive bottom border for titles in CSS?

I'm looking to replicate the following design in CSS:

enter image description here

So far I've done the following:

.bb-title::before{
  content:'';
  position: absolute;
  background-color: #7D18FD;
  width: 25%;
  height: 3px;
  bottom: 0;
}
<h2 class='f2 mt4 bb-title relative'>
  What people are saying
</h2>

But this isn't responsive.

See the Codepen.

What is the best way to achieve a bottom border on titles, where the border will always be the same width as the title?

Upvotes: 0

Views: 2547

Answers (5)

Mahdi
Mahdi

Reputation: 1405

Html : 

<div class='d-flex fl'>
  <h2 class='f2 mt4 header'>What people are saying</h2>
  <div class='line'></div>
</div>

Css: 

.header{
  margin:0 !important
}
.line{
  flex: 1;
  border:1px solid #7D18FD;
}

Upvotes: 0

Nethra
Nethra

Reputation: 609

Try

.bb-title
{
  display:inline;
  border-bottom: 5px solid #7D18FD;
  padding-bottom: 10px;
}

Upvotes: 0

Martin Najjar
Martin Najjar

Reputation: 112

You can make the element inline and then add a bottom border to it like the code bellow:

.bb-title{
  display: inline;
  border-bottom: 3px solid #7D18FD;
}

Upvotes: 1

ii iml0sto1
ii iml0sto1

Reputation: 1742

Try adding this and remove the old styling

.bb-titlee{
    position: relative;
    border-bottom: 3px solid #7D18FD;
    display: inline;
    padding: 0;
    margin: 0;
}

h2 elements are displayed as blocks as default, if we set it to inline it will wrap around the text and contain that width.

Upvotes: 1

Manikandan2811
Manikandan2811

Reputation: 841

follow these steps: 

.bb-title {
    position: relative;
    display: inline-block;
}
.bb-title::before {
   content: '';
   position: absolute;
   background-color: #7D18FD;
   width: 100%;
   height: 3px;
   bottom: -5px;
   left: 0;
   right: 0;
}

Upvotes: 3

Related Questions