How to put a partial bottom line in the exact middle for a h1 span text?

Question

Hello I have a partial bottom yellow line under h1 text but I cant figure out how to put it in the middle. I am able to put this is in left but align center or margin auto is not working.

I tried playing around with this for about an hour and I cant figure this out. I saw some people giving the h1 span a specific width in pixels but Im trying to avoid doing this because I plan on making the text smaller for ipad and mobile.

.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}



#meet-our-team .container h1 span {

    position: relative;
    
}

#meet-our-team .container h1 span::after {

    content: '';
    width: 40%;
    height: 4px;
    background: red;
    position: absolute;
    bottom: -4px;
    left: 0;
    
    
}

<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h1 class="l-heading text-center py-2">
            <span>Meet The Owner</span>
        </h1>  
        
    </div>
</section>

score 3 · Accepted Answer · answered Apr 08 '20 at 05:08

margin: auto is correct, but you cant center your absolute pseudo element like this, only with auto. But if you set left: 0; and right: 0;, you are centering horizontally.

.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}



#meet-our-team .container h1 span {
    position: relative;   
}

#meet-our-team .container h1 span::after {
    content: '';
    width: 40%;
    height: 4px;
    background: red;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    margin: auto;
}

<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h1 class="l-heading text-center py-2">
            <span>Meet The Owner</span>
        </h1>  
        
    </div>
</section>

This is perfect. Thank you. – ruben005 Apr 11 '20 at 23:56 — ruben005, Apr 11 '20 at 23:56

score 0 · Answer 2 · answered Apr 08 '20 at 05:14

Hey you can also try the below code to achieve your goal HTML

<section id="meet-our-team" class="bg-black">
    <div class="container">
        <h3 class="section-title text-center">
            <span>Meet The Owner</span>
        </h3>  
    </div>
</section>

CSS

       .section-title {
            font-family: 'Raleway', sans-serif;
            font-weight: 800;
            font-size: 25px;
            color: #333;
            text-transform: uppercase;
            margin: 0 0 40px;
            padding-bottom: 20px;
            position: relative;
            text-align: center;
        }
        .section-title.text-center:after {
            left: 50%;
            margin-left: -40px;
        }
        .section-title:after {
            position: absolute;
            content: '';
            width: 80px;
            height: 5px;
            background: #FF9933;
            bottom: 0;
            left: 0;
        }

How to put a partial bottom line in the exact middle for a h1 span text?

2 Answers2