Ostatnio przyszło mi wdrażać projekt graficzny, na którym tytuł strony/wpisu wyglądał w ten sposób, że zawsze pierwszy wyraz był innego koloru niż pozostałe. Niby nic trudnego, ale w momencie gdy treść jest generowana dynamicznie i nie jest to statyczny HTML to pojawia się mały problem. Kojarzyłem pewne funkcje w CSS pozwalające na wyróżnienie pierwszego znaku, ba nawet pierwszej linijki. Mowa tu oczywiście o selektorach :first-letter i :first-line. Na zdrowy chłopski rozum zacząłem szukać podobnego pseudoelementu dla pierwszego wyrazu, czyli coś co brzmiałoby :first-word. Niestety, okazało się, że obecnie nie bardzo mogę coś takiego w łatwy sposób zaimplementować z poziomu CSS. Próbowałem jeszcze przez chwilę znaleźć gotowe rozwiązanie, niestety bezskutecznie. Cały projekt oparty był na WordPressie, więc postanowiłem dopisać po prostu odpowiednią funkcję w pliku functions.php. Nie twierdzę, że jest to optymalne rozwiązanie, ale z pewnością wystarczająco skuteczne. Oto kod:
(więcej…)