Using CSS to insert text

html

responsive-design

best-practices

accessibility

byAlex Kataev·Nov 13, 2024

To insert text with CSS, use ::before or ::after pseudo-elements in combination with the content property. Here is an example showing how this works:

.element::before {
  content: "Start - ";
}

.element::after {
  content: " - End";
}

These pseudo-elements allow text to be directly inserted into the DOM, which can be styled and laid out. Just remember, they won't show in your HTML source and the parent element's display property shouldn't be 'none'.

Text Injection with CSS attributes

Need your text to be dynamic? You can utilize HTML5 data attributes and CSS’s attr() function:

.data-element::before {
  content: attr(data-text);
}

In your HTML document:

<div class="data-element" data-text="Dynamic Start - "></div>

This approach makes it easier to revert content that can be dynamically derived from HTML itself.

Putting a Spin on Pseudo-elements

It's not only about adding simple text. Let's jazz it up by adding custom bullets to list items or introducing prefixes for class elements:

.list-item::before {
  content: "• ";
  color: red; // Because red bullets are cool!
}

.OwnerJoe::before {
  content: "Joe's Task: "; // It's Joe's world, we're just living in it!
}

This approach not only allows meaningful content insertion but also enhances visual styling.

Alternatives with a Dash of JavaScript

Got an older browser that doesn't support CSS3? Fear not, jQuery’s got your back:

$('.element').each(function() {
  $(this).before('Additional Start - '); // Whoever said dinosaurs can't have fun?
});

But remember, for best performance and code simplicity, CSS holds the crown. Use JavaScript sparingly and only when essential.

Embrace HTML5 and kiss Redundancies Goodbye

HTML5 data attributes are a fantastic way to fuse extra information into your elements. Pair them with CSS content property for a winning combo:

<div class="element" data-owner="Joe's Task"></div> <!-- Hello, meet Joe! -->

By making small tweaks like these, you'll be able to keep your HTML and CSS clean and efficient.

Write Clean, Stay Lean

Abide by the holy grail - the DRY (Don't Repeat Yourself) principle. CSS3 offers elegant solutions that save tons of space and increase manageability.

Homework is Fun, Research is Better

Never forget to validate your code and keep up with official documentation; there's always something new around the corner. Staying updated ensures your project remains compatible across various platforms and browsers.

Web Accessibility Matters

Remember, not all content added through CSS is accessible to screen reader users. So, always ensure that key information is included in the HTML to maintain accessibility.

.sr-only::before {
  content: "Important: ";
  color: red; // 'Cause some things just need to stand out!
}

explain-codes / Html / Using CSS to insert text

Linked

Css content property: is it possible to insert HTML instead of Text?



Css :first-letter not working



Change bullets color of an HTML list without using span



What is the difference between HTML div and span elements?



How to use tick / checkmark symbol (✓) instead of bullets in an unordered list?



How to append text to a div element?



Render a string in HTML and preserve spaces and linebreaks



Text Injection with CSS attributes Putting a Spin on Pseudo-elements Alternatives with a Dash of JavaScript Embrace HTML5 and kiss Redundancies Goodbye Write Clean, Stay Lean Homework is Fun, Research is Better Web Accessibility Matters