Target First Letter of Each Word in CSS

target first letter of each word in css

You should wrap every single word with a tag and use ::first-letter CSS selector .

Also, note that this selector does not work on inline elements. If you want to use it with an inline element, such a <span>, make sure you set display:inline-block (see here for more details: https://stackoverflow.com/a/7631782/11298742)

example :

p span { display: inline-block; font-family: 'Roboto', sans-serif }p span::first-letter {    color: red;    font-weight: bold;}

<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet</span></p>

First letter every word of header tag in CSS little bigger

first-letter works only for block elements so remove display:inline; and you are good to go.

h1 {  color: #1c1c1d;  font-family: 'Raleway', sans-serif;  font-size: 27px;  font-weight: normal;  margin: -2px 0px 0px;  text-align: center;  display: inline-block;  text-shadow: 1px 1px 2px #082b34;}
span {  display: inline-block;}
span::first-letter {  font-size: 200%;  color: #eb632d;}

<h1> <span>WELCOME</span> <span>TO</span> <span>HOMEPAGE</span> </h1>

Targeting first letter of each word in h1 using javascript

As per OP's request, this will "wrap the first letter of each word".

Since there are two <h1> elements (as OP said, very wrong), one should iterate them using each too, same way OP did with the words array.

$(document).ready(function() {

    $('h1').each( function(index, heading) {
    
      const words = $(heading).text().split(' ')
      let html = '';
      
      $.each(words, function() {
        html += '<span class="firstLetter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
      })
      
      $(heading).html(html);
    })
    
});

span.firstLetter {
  color: violet;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Lorem ipsum dolor sit amet</h1>

<hr>

<h1>Bacon ipsum dolor amet biltong pork chop bacon</h1>

Style first letter of each word in paragraph

use with split(" ") for create the array form string and forEach() is iterate the each word. Then slice(0,1) the cut first letter of the word then append with span .And add the css effect with span

var str = $('p').text().split(" ");$('p').empty();str.forEach(function(a) {  $('p').append(' <span>' + a.slice(0, 1) + '</span>' + a.slice(1))})

p {  font-size: 150%;  color: #000000;}
span {  font-size: 200%;  color: #ff0000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>Hello This Is The Title</p>

Changing colors of word's first letter in a sentence using only css rule

If you can use javascript then you should try following code...

$('.capitalize').each(function(){    var text = this.innerText;    var words = text.split(" ");    var spans = [];    var _this = $(this);    this.innerHTML = "";    words.forEach(function(word, index){        _this.append($('<span>', {text: word}));    });});

.capitalize {    text-transform: lowercase;}
.capitalize span {    display: inline-block;    }
.capitalize span:first-letter {    text-transform: uppercase !important;    color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class='capitalize'>    SOMETHING BETTER     SOMETHING BETTER     SOMETHING BETTER </div>

CSS :first-letter not working

::first-letter does not work on inline elements such as a span. ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block.

Therefore it's better to apply ::first-letter to a p instead of a span.

p::first-letter {font-size: 500px;}

or if you want a ::first-letter selector in a span then write it like this:

p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN provides the rationale for this non-obvious behaviour:

The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

...

A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

Another odd case(apart from not working on inline items) is if you use :before the :first-letter will apply to the before not the actual first letter see codepen

Examples

• http://jsfiddle.net/sandeep/KvGr2/9/
• http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/

References

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
http://reference.sitepoint.com/css/pseudoelement-firstletter

Adding style color on the first letter of each word in Javascript is not working

Use JS to wrap your first letters in a span and apply style to them.

window.onload = (event) => {
  const heading = document.getElementById('heading');
  const headingTxt = heading.innerText;
  const headingWords = headingTxt.split(/[ \t]+/); //regex matches any number of spaces
  heading.innerHTML = headingWords.map(word => {
      const firstLetter = word.substring(0,1);
      const restOfWord = word.substring(1,word.length);
      return `<span style="color: red">${firstLetter}</span>${restOfWord}`
  }).join(' ');

}

<h1 id="heading">
  The heading    text    here
</h1>

css bold first word

There is no ::first-word pseudo-element in CSS; you'll have to wrap the first word in an extra element and then select that.

css selector: first paragraph's first letter inside a div

div p:first-of-type:first-letter { font-weight: bold; }

---

Related Topics