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