How to use fit-content in CSS

Introduction

https://ishadeed.com/snippet/fit-content/

The keyword fit-content will make an element width equal to its content based on specific conditions.

Custom underline for a heading

h1 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: inset 0 -6px 0 0 lightgrey;
}

Figure And Image

figure {
    width: fit-content;
    margin: 0 auto;
    background: #fff;
    padding: 1rem;
    border-radius: 10px;
}