JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="dotted first">This header has a first-line pseudo-element<br /> And its :first-line rules override its :after rules.</h2>
<br><br><br>
<h2 class="dotted">This header has no first-line pseudo-element<br /> And its dots are at the correct size.</h2>

CSS

h2.dotted {
    position: relative;
    font-size: 20px;
}
h2.dotted.first:first-line {
    font-size: 30px;
}
h2.dotted:before {
	content: "\A............................................";
    font-size: 10px !important;
    position: absolute;
    bottom:-1em;
    left: 0;    
	width: 100%;
    white-space: pre;
}