How to make ::after element have same width as its previous sibling - html

Question

I have an <div> container with an <img> and an ::after pseudo-element. Like so:
<div class="container" data-caption="this caption should be as wide as the image and then wrap">
<img>
</div>
.container {
display: inline-block
}
.container::after {
display: block
background: #aabbaa
content: attr(data-caption)
line-height: 40px
padding: 0 1rem
}
The container should get its width from the contained image while the ::after element should wrap its content accordingly, like this:
Instead the after element does not wrap - see this codepen.

Answer 1

Edited for dynamically inheriting from the image rather than the text use max-width: min-content:
.container
display: inline-block
border: 1px dashed red
max-width: min-content
&::after
display: block
background: #aabbaa
content: attr(data-caption)
line-height: 40px
padding: 0 1rem
white-space: wrap

Answer 2

You can use some positioning hacks, with a relative parent and absolute pseudo element. See here:
https://codepen.io/palash/pen/dJabRr
Also, white-space: wrap doesn't exist, it's white-space: normal that you are looking for, and it's is the default value. (nowrap does exist, though.)
.container
position: relative
...
&::after
...
position: absolute
left: 0
right: 0
Edit: If you don't want to use absolute positioning (so that border comes around the caption too), you can use flexbox to do it –
Updated pen: https://codepen.io/palash/pen/BYyXjq
.container
display: flex
flex-direction: column
align-items: flex-start
width: min-content
...
&::after
background: #aabbaa
content: attr(data-caption)
line-height: 40px
padding: 0 1rem