CSS text-transform capitalize on all caps

I'd like to sugest a pure CSS solution that is more useful than the first letter solution presented but is also very similar.

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

Although this is limited to the first line it may be useful for more use cases than the first letter solution since it applies capitalization to the whole line and not only the first word. (all words in the first line) In the OP's specific case this could have solved it.

Notes: As mentioned in the first letter solution comments, the order of the CSS rules is important! Also note that I changed the <a> tag for a <div> tag because for some reason the pseudo-element ::first-line doesn't work with <a> tags natively but either <div> or <p> are fine. EDIT: the <a> element will work if display: inline-block; is added to the .link class. Thanks to Dave Land for spotting that!

New Note: if the text wraps it will loose the capitalization because it is now in fact on the second line (first line is still ok).

The PHP solution, in backend:

$string = 'UPPERCASE';
$lowercase = strtolower($string);
echo ucwords($lowercase);

I know this is a late response but if you want to compare the performance of various solutions I have a jsPerf that I created.

Regex solutions are the fastest for sure.

Here is the jsPerf: https://jsperf.com/capitalize-jwaz

There are 2 regex solutions.

The first one uses/\b[a-z]/g. Word boundary will capital words such as non-disclosure to Non-Disclosure.

If you only want to capitalize letters that are preceded by a space then use the second regex

/(^[a-z]|\s[a-z])/g

if you are using jQuery; this is one a way to do it:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

Here is an easier to read version doing the same thing:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

Demo