How to Customize Website Appearance with CSS Content?
Tags: css, html, frontend, tutorial
Published: 2023-05-05 12:48:30

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

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

```css
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

- <u>Text Content</u>: 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.

- <u>Image Content</u>: The `content` property can also add images to an HTML element, including custom logos, decorative images, or background images.

- <u>Attribute Content</u>: 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.

- <u>Counter Content</u>: 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.

- <u>Icons and Icons Content</u>: 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.

- <u>Pseudo-Element Content</u>: 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:

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

div::after {
  content: "After text";
}
```
-----
```HTML
<div>
  Hello
</div>
```
We get the following on the interface
![screenshot of the code in the live site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71hs1p18ymubdnijky4g.png)

> 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:

```css
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: 

![dog image example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpotaoce8dghzgrurp15.png)
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.

```Html
<a href="#">Here is the movie link</a>
```
```css
 a:before {
        font-family: "Font Awesome 5 Free";
        content: "\f008";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
      }
```


![Movie icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msn6894jl2dhnfvy3aad.png)

###  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:
```HTML

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

```
```css
.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;
}
```

![custom quotes with CSS content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0hd0v7sshytz0e0lmkn.png)


### 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.

```HTML
<label>
  <input type="checkbox" name="checkbox1">
  Checkbox Label
 </label>
```
```css
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.

![customized checkbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1ythd5smuqqs3p9dyom.png)


Next, we customize the checked appearance  
```css
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.

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

![checked checkbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc4f26hicau93uqwl3n3.png)


### 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
```HTML
<a title="A quick history of programming" href="https://history.com">Programming is old</a>
```
This styling will show as follows:
![plain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ez4tlc67jlrfns90ig4h.png)

But we can improve the user experience by adding a hover effect and using `content` to add the title attribute to the user interface.
```css
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:
![css content hover trick](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovtp97xvfhygmca9l0ko.png)

## 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:

- <u>Use `content` to add icons and symbols</u>: 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.
- <u>Use `content` to add text to links</u>: 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.
- <u>Use `content` with the `::before` and `::after` pseudo-elements</u>: 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.
- <u>Use attr() with `content` to add dynamic content</u>: 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.