How to Change Content in CSS: A Comprehensive Guide

Changing content in CSS allows developers to update and modify text, images, and other content without having to edit the actual HTML. This opens up creative possibilities to transform website content in visually engaging ways.

In this comprehensive guide, we‘ll explore different methods to change content in CSS using techniques like pseudo-elements, the content property, toggling visibility, replacing text, changing images, animations, and more.

We’ll be approaching this topic from an intermediate developer’s perspective, focusing on both practical application and expert technique. Let’s dive in!

The Powerful Potential of Content Transformation

Before surveying specific CSS properties, let’s broadly consider why you’d want to change content in the first place. What creative doors does this capability open?

Fundamentally, separating content from presentation unlocks new possibilities for engaging users by dynamically adapting information to suit the moment.

Changing content with CSS facilitates everything from subtle UI flourishes to completely immersive animations. Developers can guide users, highlight details, tell stories, visualize data, and create experiences otherwise confined to rigid HTML.

That said, with great power comes great responsibility. We should be judicious and purposeful when manipulating content to avoid negatively impacting usability or accessibility.

But when applied deliberately, content control through CSS grants developers creative license otherwise unavailable. Let’s explore some common use cases where these techniques shine.

Seven Key Use Cases for Content Transformation

Here are seven common scenarios where changing content in CSS elevates user experiences:

1. Dynamic Messaging

By toggling visibility or text inserts, CSS allows messaging dynamic notifications, warnings, and other feedback to users:

/* Notification message */
.notification {
   display: none;
   background: #fee;
   padding: 0.5em; 
}

.notification--visible {
  display: block; 
}

A JavaScript trigger could then toggle the .notification--visible class.

This technique avoids cluttering the HTML with conditional content branches.

2. Text Truncation

CSS can truncate long blocks of text by limiting heights and inserting ellipses:

.truncated-text {
  max-height: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

This cleanly shortens excerpts for teasers without hacky substring calls.

3. Text Highlighting

CSS makes highlighting keywords dynamically easy without littering text with markup:

mark {
   background: yellow;
   padding: 2px 4px;
   border-radius: 4px;
}

.highlight {
   animation: blink 2s ease infinite; 
}

@keyframes blink {
  50% {
     background: none;
  }
}

Now a script could easily toggle a .highlight class to call attention to words.

4. Progressive Enhancement

Rather than overloading HTML with conditional content branches, CSS can progressively layer more details on sparse base content:

.product-title {
  color: blue; 
}

@media (min-width: 600px) {

  .product-title::before {
    /* Insert decorative icon for larger screens */  
    content: url(icon.svg); 
    margin-right: 0.5em;
  }

} 

This elegantly sprinkles in enrichments without weighining down smaller-screen experiences.

5. Wayfinding

CSS allows visually guiding users through processes, onboarding flows, help docs, etc.

For example, simple techniques like toggling opacity or darkening untouched sections help direct focus during complicated checkpoints.

6. Data Visualization

CSS animations and transitions facilitate dynamic data viz updates:

.bar-chart__bar--highlighted {
   animation: growBar 0.5s ease-out forwards;
}

@keyframes growBar {
   100% {
      height: 50px; 
      background: fuchsia;
   }
}

This interaction captures users’ attention on data changes.

7. Teasers

Limiting heights, masking images, and truncating text enable impactful content teasers without editing source copies:

.teaser {
   max-height: 250px;
   overflow: hidden; 
   /* Dark scrim for intrigue */
   position: relative;  
}

.teaser::after {
   content: ‘‘;
   position: absolute;
   top: 0; 
   left: 0;
   right: 0;  
   bottom: 0;
   background: rgba(0,0,0,0.25); 
}

This stylish effect intrigues visitors to engage more content.

As you can see, manipulating content with CSS facilitates all sorts of dynamic experiences. But how exactly can we tap into this capability? Let’s dig into some methods.

Method 1: Toggling Visibility with Display

One of the simplest yet powerful ways to change content is toggling visibility with the display property.

The display Property

The display property controls whether and how elements render on page by setting values like:

• none – Hide element
• block – Show as block-level element
• inline – Flow inline with text
• etc.

Toggling between display states gives straightforward control over content visibility.

For example, let’s create a simple show/hide interaction by linking display changes to a checkbox state:

<input type="checkbox" id="toggle">

<p>Now you see me!</p>

p {
  display: none;  
}

#toggle:checked ~ p {
  display: block;
}  

This will hide the paragraph by default, only displaying when users actively check the box to trigger the adjacent selector.

We could also attach this effect to button clicks with JavaScript events. But keeping the logic in CSS makes the visibility change straightforward to build and maintain.

Use Cases

This technique really shines for dynamic UI messaging – warnings, notifications, tooltips, etc. No need cluttering HTML with hidden conditional branches. Just sprinkle in some CSS logic to display conditionally.

Other common use cases:

• Show/hide table of contents
• Expand “Show more” collapsed content
• Toggle panel visibility in wizards or multi-step flows
• Reveal additional details on demand

Really anything that benefits from cleanly toggling content visibility without touching the markup.

Considerations

A few things to keep in mind when toggling display:

• Hide content off-screen with care for accessibility. Don’t position in ways that visually hides but keeps in tab flow.
• Watch performance with rapid high-frequency visibility changes. Trigger GPU composite potentially expensive reflows.
• Ensure usability by testing across viewports and devices. Block elements can shift layouts.

But used judiciously, display changes help focus attention and reveal content when it matters most.

Method 2: Transforming Text with Pseudo-Elements

For more advanced text content changes, let’s explore some special selectors known as pseudo-elements.

/* Syntax example */

selector::before {
  /* Styles here */  
}

selector::after {
  /* Styles here */   
}

These magical ::before and ::after selectors allow inserting generated content inside selected elements without touching HTML.

Let’s break down some use cases.

Inserting Images and Icons

A common technique is embellishing links or headings by inserting decorative graphics with ::before:

a.fancy::before {
  content: url(‘ornament.svg‘);
  margin-right: 0.5em;   
}

This neatly inserts the image before the link text, avoiding additional non-semantic wrapper elements.

Quoting Testimonials

Along similar lines, we can add quote graphics to testimonials with ::after:

blockquote::after {
  content: url(‘quote.svg‘);
  position: absolute; 
  bottom: -1.2em;
  right: 0; 
}

This cosmetic enhancement indicates quotes without altering text semantics.

Augmenting Accessibility

Pseudo-elements also allow enhancing accessibility in ways only perceivable to assistive tech:

.tooltip::before {
  content: ‘Tooltip: ‘;
  font-weight: bold;
  font-size: 0.9em;  
} 

This improves context for screen readers without affecting tooltip presentation.

Replacing Text

We can even fully replace text using a pseudo-element content insert coupled with hiding the original text:

.fancy-header::before {
   content: ‘Jazzed up heading‘;
   font-family: cursive;
   color: purple;
}

.fancy-header {
   visibility: hidden; 
}

Now the styled ::before text completely takes over without editing HTML.

Transforming Text Over Time

And since pseudo-elements obey all other CSS, we can animate and transition the inserted content:

h1::after {
  content: ‘Rock on!‘;
  opacity: 0;
  transition: 0.3s ease-out;
}

h1:hover::after {
  opacity: 1;
  transform: scale(1.2) rotate(10deg); 
}

This animated text insert adds flair without JavaScript.

Browser Support

Pseudo-elements enjoy excellent browser support, with full functionality in all modern browsers. Some legacy IE versions have bugs though.

Accessibility Considerations

• Screen readers may pronounce inserted content differently or as separate text chunks.
• Make sure purely decorative inserts don’t harm comprehension when hidden.
• Test context preservation with accessibility helpers disabled.

So in review, pseudo-elements provide extremely versatile text content manipulation while respecting semantic document structure. Their versatility makes them a frontend dev’s best friend!

But text isn’t our only content domain in CSS…let’s talk images.

Method 3 – Cropping and Fitting Images with Object-Fit

While we’ve focused a lot on text so far, CSS also provides some great tools for transforming image content.

Namely, the object-fit property offers nuanced control over image cropping and scaling behavior within containers.

Object-Fit Syntax

img {
  object-fit: fill | contain | cover | scale-down | none; 
} 

This tells images how to conform to container dimensions with values like:

• fill – Ignore ratio, stretch to max size
• contain – Letterbox to fit container
• cover – Crop edges to fill container
• scale-down – Size down to avoid crop
• etc.

For example, making all images consistently sized thumbnails with slight cropping:

img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

Or forcing a full-bleed hero image without stretching distortion:

.hero__image {    
  object-fit: cover;
  width: 100%;
  height: 30vh;  
}

This helps present images consistently without individually editing files, improving perceived quality.

Use Cases

Reasons to consider object-fit:

• Presenting uniformly formatted gallery sets
• Aesthetic placeholder behavior for missing images
• Consistent cropping for templates
• Scaling vector images as background textures

Downsides to Weigh

Potential downsides:

• Performance cost decoding larger images to crop
• Unexpected crop if important focus points
• Art direction limitations over individually editing

So while extremely useful, object-fit shouldn’t subsume manually fitting truly hero images. Use judiciously based on context tradeoffs.

Method 4: Building Immersive Animations

For even more impactful content transformations, CSS animations and transitions facilitate sequenced interactions over time. This brings interfaces to life!

CSS Animation Syntax

Let’s breakdown what’s happening in this example:

@keyframes bam {

  0% {
    transform: scale(1);   
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }

}

.box {
   animation: bam 0.4s ease infinite;
}   

Breaking it down:

• @keyframes – Declare animation sequence
• 0/50/100% – Keyframe progress markers
• Animated property values – Scale transform
• animation – Attach animation to element
• duration – Speed
• easing – Movement curve
• etc.

This empowers gradually changing property values over time – movement, color, size, position, you name it.

Use Cases

Animations enhance interfaces and visualizations in countless ways:

• Draw attention to expanding cards
• Indicate updates like progress bars
• Delight with playful loading spinners
• Heighten visualizations through data changes

Used deliberately, motion guides users, explains relationships, and constructs narrative through intuitive sequences.

Performance Considerations

That said, take care not to overuse animations carelessly. Some tips:

• Limit complexity on low-powered devices
• Allow disabling motion sickness-inducing effects
• Mindfully direct focus, don’t distract
• Test for struggling FPS, memory leaks
• Profile with DevTools to isolate costly transforms

When applied judiciously, animations make stellar tools for memorable content transformations.

Method 5: Swapping Textures with Masks

For one last technique, the mask property enables selectively revealing parts of an element by “punching holes” through a cutout mask layer.

Mask Syntax

.target {
  mask: url(‘mask.svg‘) center/contain no-repeat;
  mask-size: 50% auto;
}

The possibilities span:

• Revealing underlying textures/colors
• Dynamically highlighting diagram parts
• Transforming images (e.g. sepia tone through a mask layer)
• Animating mask positions for neat reveals

Let’s see an impressive example masking random div backgrounds:

div {
  background: url(‘texture.jpg‘);
  mask: radial-gradient(circle 5px at 40% 60%, black 50%, rgba(0, 0, 0, .2) 52%);
  animation: moveMask 5s linear infinite alternate;
}

@keyframes moveMask {
  to {background-position: 100% 0}  
}

This progressively reveals the shifting background through the roaming mask.

Pretty neat! Though support requires prefixes for now, masks create unique reveal effects.

Explore more demos on Codepen showcasing this creativity.

Key Takeaways & Next Steps

We’ve surveyed a variety techniques for dynamically changing text, images, and multimedia content with CSS:

• Toggling visibility – Simple yet powerful control over what displays
• Pseudo-elements – Insert and transform text creatively
• Object-fit – Change image cropping and flow
• Animations – Guide interactions and make vizs pop
• Masks – Reveal need effects through cutouts

These represent just a subset of possibilities, limited only by imagination. More and more, CSS offers control traditionally requiring cumbersome DOM scripting.

If you found this guide helpful as an introduction to changing content with CSS, here are some suggested next steps to level up:

• Experiment with code examples in a test project
• Explore implementing across different media formats like video
• Compare performance across techniques with DevTools
• Prototype an animation concept for a personal site
• Get familiar with CSS features like filters, blend modes, clip paths
• Integrate with JavaScript events for even more control
• Review latest specs emerging for Houdini and other new API’s
• Share your own creations on CodePen and explore others!

The web increasingly empowers designers and developers to push creative boundaries without sacrificing semantics or accessibility. Changing content in CSS propels these possibilities.

But remember, with great power comes great responsibility. Wield new tricks judiciously, elevate user experience, and happy coding!