W3docs
en
Log in

How to Change the Color of the First Word in a Text

In this tutorial, you can see how to change the color of the first word of a text. For that, use the CSS :before pseudo-element with the content property.

Tags

Solutions with CSS and HTML

If you want to change the color of the first word of a text, you can use the CSS ::before pseudo-element to insert generated content before an element's text. Its value is defined with the content property. Note that pure CSS does not have a :first-word selector, so this method requires hardcoding the target word. For dynamic content, wrapping the first word in an HTML <span> tag is the most reliable approach. If the content property is omitted, no content will be generated.

In the example below, we use a <div> element with a <span class="attribute">class</span> "word" and set its color. We then apply the ::before pseudo-element to the "word" class, define the target word in the content property, and apply a different color to it.

Example of changing the color of the first word of a text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .word {
        color: #000;
      }
      .word:before {
        color: #f00000;
        content: "Ipsum";
      }
    </style>
  </head>
  <body>
    <div class="word">
      Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
      when an unknown printer took a galley of type and scrambled it to make a
      type specimen book. It has survived not only five centuries, but also 
      the leap into electronic typesetting, remaining essentially unchanged.
      It was popularised in the 1960s with the release of Letraset sheets 
      containing Lorem Ipsum passages, and more recently with desktop 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> <div class="word">Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div>

Warning

Visually, this achieves the goal, but it has accessibility and semantic drawbacks. Because the pseudo-element content is separate from the DOM text, assistive technologies may read it twice or treat it as a duplicate. Additionally, it mixes presentation with content structure.

Example of changing the color of the first word:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div[data-highlightword] {
        position: relative;
        color: #666666;
      }
      div[data-highlightword]::before {
        content: attr(data-highlightword);
        color: purple;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div data-highlightword="Example">
      Example for you.
    </div>
  </body>
</html>
Try it Yourself »

Example of changing the color of the first word with the HTML <span> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Example</span> for you.
    </div>
  </body>
</html>
Try it Yourself »