Superior method to ensure the child element's border overlaps with that of the parent

Question

Superior method to ensure the child element's border overlaps with that of the parent

I am currently working on a project that requires a unique CSS effect:

Let me explain exactly what I am trying to achieve:

The main element (referred to as the title) has padding and a 2px bottom border. Inside this, there is a child element (known as title-inner) which also has padding and a 2px border but in a different color, creating an overlapping effect with its parent (title).

This is the structure I am using:

<div class="title">
    <div class="title-inner">Widget title</div>
</div>

I understand that achieving this effect will require adjusting the padding and margin properties of both elements, however, the CSS I have written so far does not respond well on mobile or when resizing the browser window (you can see it in action here: this fiddle).

Is there a more effective way to accomplish this CSS effect? Any suggestions?

jquery html css frontend

Answer 1

Answer №1

Instead of applying padding to both the child and parent elements, consider giving the padding only to the child element. Then, add a negative margin to ensure that the borders overlap each other.

body {
    background: black;
    color: #333;
    font-family: Arial, sans-serif;
    margin: 1em;
}

.title {
    border-bottom: 3px solid #ccc;
}

.title-inner {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 12px;
    margin-bottom: -3px;
    border-bottom: 3px solid #FACD98;
}

<div class="title">
    <span class="title-inner">Lorem Ipsum</span>
</div>

Answer 2

Instead of applying padding to both the child and parent elements, consider giving the padding only to the child element. Then, add a negative margin to ensure that the borders overlap each other.

body {
    background: black;
    color: #333;
    font-family: Arial, sans-serif;
    margin: 1em;
}

.title {
    border-bottom: 3px solid #ccc;
}

.title-inner {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 12px;
    margin-bottom: -3px;
    border-bottom: 3px solid #FACD98;
}

<div class="title">
    <span class="title-inner">Lorem Ipsum</span>
</div>

Answer 3

Answer №2

The most effective approach, in my opinion, involves utilizing background, divs, and width properties.

Check out the Animation Demo here

By using div elements instead of borders, you gain greater control over the layout of your elements.

<div class="title">
    <div class="title-inner">Lorem Ipsum</div>
    <div id='line'>
        <div id='load'></div>
    </div>
</div>

Once the div elements are in place, apply the following CSS styles:

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}
.title-inner {
    padding: 17px;
}
#line {
    background-color:purple;
    height:2px;
    width:100%;
}
#load {
    background-color:yellow;
    height:100%;
    width:0%;
}

Finally, enhance the functionality by adding some JavaScript code:

   function loop() {
        $('#load').animate({
            width: "50%"
        }, 1600);
        $('#load').promise().done(function () {
            $(this).width(0);
            loop();
        });

    }
loop();

Answer 4

The most effective approach, in my opinion, involves utilizing background, divs, and width properties.

Check out the Animation Demo here

By using div elements instead of borders, you gain greater control over the layout of your elements.

<div class="title">
    <div class="title-inner">Lorem Ipsum</div>
    <div id='line'>
        <div id='load'></div>
    </div>
</div>

Once the div elements are in place, apply the following CSS styles:

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}
.title-inner {
    padding: 17px;
}
#line {
    background-color:purple;
    height:2px;
    width:100%;
}
#load {
    background-color:yellow;
    height:100%;
    width:0%;
}

Finally, enhance the functionality by adding some JavaScript code:

   function loop() {
        $('#load').animate({
            width: "50%"
        }, 1600);
        $('#load').promise().done(function () {
            $(this).width(0);
            loop();
        });

    }
loop();

Answer 5

Answer №3

One alternative approach is utilizing absolute positioning for the child element:

.heading {
    border-bottom: 2px solid;
    position: relative;
    padding-bottom: 20px;
    height: 20px;
}

.heading-content {
    display: inline-block;
    position: absolute;
    width: 50%;
    height: 100%;
    border-bottom: 2px solid #E64998;
}

It is worth noting that I included the 50% width based on your provided image example.

http://jsfiddle.net/v1ut1pyv/5/

Answer 6

One alternative approach is utilizing absolute positioning for the child element:

.heading {
    border-bottom: 2px solid;
    position: relative;
    padding-bottom: 20px;
    height: 20px;
}

.heading-content {
    display: inline-block;
    position: absolute;
    width: 50%;
    height: 100%;
    border-bottom: 2px solid #E64998;
}

It is worth noting that I included the 50% width based on your provided image example.

http://jsfiddle.net/v1ut1pyv/5/

Superior method to ensure the child element's border overlaps with that of the parent

Answer №1

Answer №2

Answer №3

Similar questions

The AJAX request for JSON data is functioning correctly in Firefox, but is experiencing compatibility issues with other web browsers

The text within the button disappears when in the :before state

Angular HttpClient does not support cross-domain POST requests, unlike jQuery which does

Problems with WordPress Theme Rendering in Outdated Versions of Internet Explorer

Insufficient width of images in the bootstrap carousel

stopPropagation() halts the propagation in the opposite direction

Exploring Symfony2 controller integration with Javascript arguments

Adapting Bootstrap components based on the screen size: Viewport-driven

Can someone explain the significance of '{}' within the function shown below?

Can individual column searching be implemented in datatable on the server side?

Tips on traversing a JSON array in AngularJS using the ng-repeat directive

Converting JSON information into a mailto hyperlink

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

Responses were buried beneath the inquiries on the frequently asked questions page

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

Combining PHP and MySQL with a join statement

Verify the form data before triggering the ajax call with just one click

Are there any specific steps I should take to ensure that my server can support jQuery.getJSON when using a bookmarklet?

What is the best way to turn off the jQuery Kladr plugin?

Highlighting Navbar Items