I recently stumbled upon a question here where someone was trying to get a proper line-behind behavior on their headers. Something like this:
Their implementation yielded different results across different headers, and hence the question. The implementation was quite odd by using
margin: 10px 0;
border-top: 2px solid black;
<div class="a">some more text</div>
<div class="b">some more text</div>
The auto tabular layout is not specified by the standard, so I recommend against using this kind of percentage tricks, which will probably break on some browsers.
However, it seems most browsers behave like this:
::afterpseudo-elements will take the specified percentage of the table.
So if you have
width: 25%, the text will take the remaining
tablewidth = textwidth / 50% = 2 * textwidth pseudowidth = 25% * tablewidth = 0.5 * textwidth
If you have
width: 40%, the text will take the remaining
tablewidth = textwidth / 20% = 5 * textwidth pseudowidth = 40% * tablewidth = 2 * textwidth
If you have
width: 45%, the text will take the remaining
10%. That is, the table will double its width with respect to the previous case, if the text is the same.
tablewidth = textwidth / 10% = 10 * textwidth pseudowidth = 45% * tablewidth = 4.5 * textwidth
Of course, things start to get tricky if the desired table width calculated as described above exceeds the containing block. Then
The text cell will have the width resulting of resolving the remaining percentage left by the pseudo-elements. That will be less than the preferred width of the text, so the text will wrap into multiple lines.
However, the text cell won't be narrower than the minimum required width of the text. That will usually be the width of the longest word, but may change due to e.g.
word-break: break-all or
The remaining space left by the text will be equally distributed among the pseudo-elements.
If the remaining space is negative, the pseudo-elements will have 0 width, and the table will grow (overflowing the containing block) in order to compensate that.