How to Customize Website Appearance with CSS Content?

The idea of content: ""; can be tricky for new web developers. How to use it? And when to use it. I kept asking myself these questions when I started my web development journey until I took a deep dive into understanding CSS content.

There are several use cases for CSS content.

Before we begin, I expect that you are familiar with CSS and HTML.

Let's look at the outline.

Introduction

• What is CSS content?

• How important is CSS content in web design?

• Brief on the topic in this post

Understanding CSS Content

• How does CSS content work, and what is it?

• Types of CSS Content

Applying CSS content

• How to implement CSS content on a design

• Adding images and text to pseudo-elements

• Displaying icons

• Creating custom quotes

• Styling form element

• Creating a hover panel

Tips for CSS Content

• Tips for creatively using CSS Content on web design

Conclusion

What is CSS Content?

CSS content is a property used to specify content. It is used together with ::before and ::after pseudo-elements to attach text, images, or other types of content to a website.

It is a great way to interact with the DOM while keeping your HTML code clean.
CSS content is frequently used with position, color, and background to make appealing designs.

And just like every other CSS property, it has different use cases. The simplest use will be to add text before or after an element.

For example

<p>Welcome to CSS Content, Mr. </p>

p::after{
  content:"James";
}

What do you think will print when you run this?

You are right; it will print Welcome to CSS Content, Mr James

Fun Fact: When you add text using CSS content, that text is not part of the HTML and will behave differently. It may not be selectable or highlightable, as the text is not part of the document's content.

How important is CSS content in web design?

The content property is important if you are looking forward to implementing some creative designs or else you don't need it.

CSS content allows the developer to add text or images before or after an HTML element without cluttering the HTML code.

Here are the key points about the importance of content:

• The content property is a unique and important feature of CSS that is used to insert content into an HTML element.
• Web developers can add graphics, text, and other media elements to a web page without directly modifying the HTML markup.
• Using the content property can make HTML code easier to read and understand, as it reduces clutter.
• It offers greater flexibility and control over the supply chain, enabling designers to create beautiful and engaging websites.
• The content property can add custom icons or other elements to a website without additional HTML or JavaScript code.
• Using content properties allows web developers to create reusable and more maintainable code, which can improve website performance and user experience.

Types of CSS Content

Many media contents can be added to a website using the CSS content property. They include

• Text Content: The content property can add text to an HTML element; it can be regular text, quotes, or generated text such as counters or page numbers.

• Image Content: The content property can also add images to an HTML element, including custom logos, decorative images, or background images.

• Attribute Content: The content property can specify the values ​​of HTML attributes such as href or title; it can be useful with a list of tools or to display additional information about a link.

• Counter Content: The content property can counter and display a specific HTML element and display it; it can be useful in creating numbered lists or showing how many times an element has been used.

• Icons and Icons Content: The content property can add icons, icons, or emojis to an HTML element; it can be useful in creating custom bullet points, social media logos, or other graphic elements.

• Pseudo-Element Content: The content property is usually used with pseudo-elements like ::before and ::after. It allows the developer to add text directly before or after the HTML element without modifying the HTML markup.

Applying CSS content

The application of the CSS content property is not a complicated math. If you have written any CSS code before, you have probably used it. In this section, we will discuss the applications of CSS content that every web developer should be familiar with.

How to implement CSS content on a design?

Before applying the content property to your website, it is essential to

1. Identify the HTML element
2. Determine the type of content needed
3. Use a CSS selector to target the HTML element
4. Add the content property to the CSS rule set
5. Adjust the value of the content property as needed
6. Test the new design on multiple screen size

Let's look at some common examples.

Adding images and text to pseudo-elements

CSS content property can add images or texts before or after an HTML element. We can use the ::before and ::after pseudo to target and add new media content to our site without editing the HTML source code.

To add text to a pseudo-element, set the content property to custom text enclosed in quotes. Example:

div::before {
  content: "Before text";
}

div::after {
  content: "After text";
}

---

<div>
  Hello
</div>

We get the following on the interface

Remember our fun fact, see I couldn't highlight the text from CSS content.

To add an image, you can set the content property to URL () and provide the image file path inside the parentheses. You may also need to set the display property to block or inline-block to adjust the image display. Example:

div::before {
  content: url('https://hips.hearstapps.com/hmg-prod/images/little-cute-maltipoo-puppy-royalty-free-image-1652926025.jpg?crop=0.444xw:1.00xh;0.129xw,0&resize=180:*');
  display: inline-block;
  min-height: 150px;
  min-width: 50px;
}

Add this to the Hello div, and we get the following:

Note that the height and width attributes are used to set the image's dimensions because the pseudo-element has no internal dimensions.
You can also use other CSS properties such as background-image and background position to further manipulate the image.

Overall, adding images and text to pseudo-elements through the CSS content property can be a powerful way to improve the visual design of your web pages by adding decorative elements to the plan.

Displaying icons

CSS content can be used to display icons; all you have to do is to point the content property to the desired icon.
Here is how it's done; for this example, we will use Font Awesome 5 Free to get an icon.

<a href="#">Here is the movie link</a>

 a:before {
        font-family: "Font Awesome 5 Free";
        content: "\f008";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
      }

Creating custom quotes

CSS content property can be used to create custom quotes. Although this can be achieved with HTML, using the CSS content property makes it reusable and more customizable.
For example:

<div class="blockquote">
  <p>Here's some text to quote.</p>
</div>

.blockquote {
  quotes: "\201C" "\201D" "\2018" "\2019"; /* sets the quote characters to use */
  font-style: italic; /* styles the blockquote text */
}

.blockquote::before {
  content: open-quote; 
  font-size:30px;
  colour: red;
  background-color:black;/* displays the opening quote */
}

.blockquote::after {
  content: close-quote; /* displays the closing quote */
  font-size: 80px;
}

Styling form element

CSS content property can be used to style a form; we can use it to customize the checkbox or radio type input.
For example, customizing the colour of a checkbox.

Let's first hide the native checkbox input.

<label>
  <input type="checkbox" name="checkbox1">
  Checkbox Label
 </label>

input[type="checkbox"] {
   -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
 margin: 0;
  font: inherit;
  colour: blue;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid blue;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
   display: grid;
  place-content: center;/* hides the default checkbox */
}

This stylesheet will hide the default checkbox and change the colour and size of the checkbox.

Next, we customize the checked appearance

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em yellow;
}

The content:""; allow us to have a space inside the checkbox's box. If you put a digit, it will display a digit.
Nothing will happen when you click the checkbox until we use the ::before pseudo.

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

Creating a hover panel

The CSS content property can add a content to a webpage, it is triggered by a hovering event over an HTML element. It's a simple yet powerful concept for enhancing user experience and design, and requires simple CSS knowledge.
The combination of content and ::hover can help achieve this cool CSS trick.
For example

<a title="A quick history of programming" href="https://history.com">Programming is old</a>

This styling will show as follows:

But we can improve the user experience by adding a hover effect and using content to add the title attribute to the user interface.

a {
  color: #900;
  font-size:20px;
  text-decoration: none;
}

a:hover {
  colour: red;

  position: relative;
}

a[title]:hover::after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  font-style:bold;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20;
  border-radius: 5px;   
  box-shadow: 0px 0px 4px #222;  
  background-image: linear-gradient(yellow, blue);  
}

Now we have added content: attr(title), it took the title value from the HTML, and when we hover over it, we see this:

Tips for CSS Content

CSS content property can add texts, icons, and images to a website without altering the HTML source code. But that's not where it ends.
You can also manipulate them for better design and reuse them.

Tips for creatively using CSS Content on web design

Here are some tips on how to creatively use the CSS content property:

• Use content to add icons and symbols: You can use the content property to add icons and symbols to your web page. For example, you could use the Unicode character for a checkmark to indicate that a task has been completed.
• Use content to add text to links: You can use the content property to add text to links. For example, you could use the ::before pseudo-element to add the word "Read" before a link to a blog post.
• Use content with the ::before and ::after pseudo-elements: The content property is usually combined with the ::before and ::after pseudo-elements; it allows you to insert content before or after an element without actually modifying the HTML.
• Use content to create tooltips: You can use the content property. For example, you could use the ::before pseudo-element to add a tooltip with additional information about an element.
• Use attr() with content to add dynamic content: You can use the attr() function with the content property to add dynamic content to your web page. For example, you could use attr(data-tooltip) to display the value of a data-tooltip attribute as a tooltip. The content property is a great feature to play around with and discover cool tricks.

Conclusion

Designing a website is the job of CSS, but there are many ways that you can achieve various desired designs.

CSS content property can help achieve a simple visual effect like changing the state of a checkbox.

Many developers prefer the content property because it is easier and can save you the stress of writing a script to handle minor visual effects.

CSS content property improves reusability.You can create a customize blockquote in your stylesheet and reuse it.

Comments

[fruntend]

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

[Tobenna]

Thank you!