'CSS Show border after heading

I want a heading like shown in the picture picture.

Currently I have 3 flex columns:

<section id="section1" class="py-5">
    <div class="container">
        <div class="d-flex">
            <div class="p-2 w-50 text-center"><h1>OUR DIVISIONS</h1></div>
            <div class="p-2 w-25 text-center"><h1>Sample Heading 2</h1></div>
            <div class="p-2 w-25 text-center">Sample Heading 3</div>
        </div>
    </div>
</section>

As shown in the picture, I need the OUR____ line effect in the heading.

Any help will be much appreciated.

twitter-bootstrapcssbootstrap-4


Solution 1:[1]

Here is what I did for dynamic width:

<section id="section1" class="py-5">
    <div class="container">
        <div class="d-flex">
            <div class="p-2 w-50">
                <h1 class="heading">
                    <span class="heading1">OUR</span>
                    <br>
                    <span class="heading2">DIVISIONS</span>
                </h1>
            </div>
            <div class="p-2 w-25 text-center"><h1>Sample Heading 2</h1></div>
            <div class="p-2 w-25 text-center">Sample Heading 3</div>
        </div>
    </div>
</section>

CSS used:

.heading{
    overflow: hidden;
    margin-bottom: 0;
    font-weight: normal;
    display: inline-block;
}

.heading2{
    font-size: 2.5rem;
    font-weight: 500;
}

.heading span.heading1:after{
    content:'';
    display:inline-block;
    width:100%; height:100%;
    margin-right:-100%;
    border-bottom:2px solid #000;
    margin-left: 5px;
}

Hope this helps someone too...

Solution 2:[2]

I managed to come up with something close to what you seem to be looking for but, in my opinion, it is highly dependent on the width of the container (i.e. h1, h2, etc)

Perhaps you can use the code provided below and adapt it to your own needs?

See demo code below

.w-50 {
  background-color: #f8db7d;
  font-family: sans-serif;
  width: 160px;
}

.w-50>h1 {
  font-size: 18px;
  padding: 5px 10px;
  margin: 0;
  line-height: 1em;
}

.w-50>h2 {
  font-size: 28px;
  padding: 0 10px;
  margin: 0;
  width: 100px;
}

.w-50 > h1 > span {
  width: 100px;
  display:inline-block;
  border-bottom: 2px solid black;
  line-height: .8em;
}
<section id="section1" class="py-5">
  <div class="container">
    <div class="d-flex">
      <div class="p-2 w-50 text-center">        
        <h1>OUR<span/></h1>
        <h2>DIVISIONS</h2>
      </div>
      <div class="p-2 w-25 text-center">
        <h1>Sample Heading 2</h1>
      </div>
      <div class="p-2 w-25 text-center">Sample Heading 3</div>
    </div>
  </div>
</section>

Solution 3:[3]

So I would try it with an :after element.

The best think I came up is:

.underline:after {
  content: "";
  border-bottom: 1px black solid;
  display: inline-block;
  width: 85px;
}
<div style="display: inline-block">
  <h1 class="underline">
    our
  </h1>
  <h1>
    Divisions
  </h1>
</div>

The only problem with this is, the width is set fixed to 85px. So with other headlines you need to adapt the width

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 booota
Solution 2
Solution 3

Related Questions