How do I make the background-color of h4 stay just the width of the text. I can not delimit a fixed width because I do not know the size of the text and I also can not use display: inline-block because I need h4 one underneath the other. Anyone know how I can do this or some other solution for the case will be welcome!
h1{
background-color: yellow;
}<h1>Testando!</h1>What I have achieved so far is not the expected result:
If your H4 is within a container you can use flexbox to reach your goal.
First you determine that in your container items will line up like columns, one underneath the other flex-direction: column; after they are left to prevent them from occupying the entire line align-items: flex-start;
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
h1{
background-color: yellow;
}<div class="container">
<h1>Testando!</h1>
<h1>Lorem ipsum dolor sit.</h1>
<h1>Lorem ipsum dolor sit. Lorem, ipsum.</h1>
</div>