The content attribute needs to be used in conjunction with the before and after pseudo elements to define what the pseudo elements show. This paper mainly lists the optional values of the content and the practical cases and techniques

Basic Usage

A simple example:

<p>Will not write front end </p>

p {
  &::before {
    content: "Welcome to your attention"
  }

  &::after {
    content: "WeChat Public Number"
  }
}

The browser shows this subunit:

Let's look at the structure that actually renders in the browser:

Yes, it's so rude, just like their names, one after the other

It is worth noting that in the new specification, a single colon refers to a pseudo class, and a double colon refers to a pseudo element. Even if you write: after, standard browsers will still render:: after, for compatibility with the old notation_

Preferable value

1. Common Characters
2. unicode
3. attr function
4. url function
5. counter function
6. css variable

Use one by one

To keep the article concise, here are some content attributes that omit the parent element outside:

// Original
p {
  &::after {
    content: "";  
  }
}

// After omitting
content: "";

1. Normal Characters

content: "I am the text content";

2. unicode

Special characters that come with the browser:

p {
  &:after {
    content: "\02691";
    color: red;
  }
}

Show as follows:

html special character control table

iconfont custom font icon:

<span class="icon icon-close"></span>

@font-face {
  font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1209853_ok7e8ntkhr.ttf?t=1560857741304') format('truetype');
}

.icon {
  font-family: "iconfont";
}

.icon-close::before {
  content: "\e617";
}

Show as follows:

iconfont-Alibaba Vector Icon Library

3. attr function

As the name implies, this function can get the value of an attribute in an html element, such as id, class, style, etc..

<p data-content="I am the text content"></p>

content: attr(data-content);

4. url function

Show me my Nugget avatar:

content: url("https://user-gold-cdn.xitu.io/2019/8/7/16c681a0fb3e84c4?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1");

Show as follows:

The disadvantage is that you can't control the size of the picture.

5. counter function

The counter function is used to insert the value of the counter. It can display the value of the counter in combination with the content property. Before you introduce the usage, you must be familiar with the counter-reset and counter-increment.

The purpose of counter-reset is to define a counter:

counter-reset: count1 0; // Declare a counter count1 and calculate from 0
counter-reset: count2 1; // Declare a counter count2 and calculate from 1
counter-reset: count3 0 count4 0 count5 0; // Declare multiple counters

counter-increment increments the value of the counter, which can be interpreted as += in javascript:

counter-reset: count 0;
counter-increment: count 2; // Increase count by 2. Current count is 2
counter-increment: count -2; // Make count increase by -2, the current count is -2

Note that what the counter count value does not change back to 0 here is understood as a style override, as in the following code:

div {
  width: 100px;
  width: 200px; // Width of actual rendering
}

6. css variable

When displaying variables, you can display them directly if they are of string type, or if they are of int type, you need to borrow the counter function_

// string type
--name: "Don't write front end";

p {
  &::after {
    content: var(--name); // Show as "No Writing Front End"
  }
}

---------- I am a dividing line ----------

// int type
--count: 60;

p {
  &::after {
    counter-reset: color var(--count);
    content: counter(count); // Show as "60"
  }
}

---------- I am a dividing line ----------

// Unsupported Types and Conditions
--count: 60.5; // Display as "0", decimal is not supported
--count: 60px; // Display as ", css attribute value is not supported

Stitching

Ordinary string stitching:

content: "xxx" + "xxx";

String splicing function:

// You can't use the + connector or you don't need spaces, just to distinguish
content: "I support" attr(xx);
count: "My Nugget Portrait:" url("xxxxx");
content: "The value of the counter is:" counter(xx);

Implicit conversion:

content: 0; // Show as ""
content: "" + 0; // Show as "0"
content: "" + attr(name); // Show as "attr(name)"

Practical cases

1. When the content of label a is empty, display the values in its href property:

<a href="https://juejin.im/user/587e1822128fe1005706db1c"></a>

a {
  &:empty {
    &::after {
      content: "The link content is:" attr(href);
    } 
  }
}

Show as follows:

2. Bread crumbs and separators

<ul>
  <li>home page</li>
  <li>commodity</li>
  <li>details</li>
</ul>

ul {
  display: flex;
  font-weight: bold;

  li {
    &:not(:last-child) {
      margin-right: 5px;
        
      &::after {
        content: "\276D";
        margin-left: 5px;
      }
    }
  }
}

Show as follows:

It was written like this before

<li v-for="(item, index) in list">
  <span>{{item}}</span>
  <span v-show="index < list.length - 1">,</span>
</li>

3. Progress Bar

<div class="progress" style="--percent: 14;"></div>
<div class="progress" style="--percent: 41;"></div>
<div class="progress" style="--percent: 94;"></div>

.progress {
  width: 400px;
  height: 17px;
  margin: 5px;
  color: #fff;
  background-color: #f1f1f1;
  font-size: 12px;

  &::before {
    counter-reset: percent var(--percent);
    content: counter(percent) "%"; // Text Display
    
    display: inline-block;
    width: calc(100% * var(--percent) / 100); // Width calculation
    max-width: 100%; // To prevent overflow
    height: inherit;
    text-align: right;
    background-color: #2486ff;
  }
}

Show as follows:

Add a transition effect:

transition: width 1s ease; // Page first entry has no transition effect because width has to change

You can't have both fish and bear's paw. If you only rely on css to trigger an animation effect the first time you enter the page, only animation can do it

.progress {
  &::before {
    // Remove width and transition attributes
    animation: progress 1s ease forwards;
  }
  
  @keyframes progress {
    from {
      width: 0;
    }

    to {
      width: calc(100% * var(--percent) / 100);
    }
  }
}

The page refreshes as follows:

Reference article: Small tips: How to display CSSvar variable values with context properties

4. Toolltip Tips

<button data-tooltip="I'm a tip">Button</button>

[data-tooltip] {
  position: relative;
  
  &::after {
    content: attr(data-tooltip); // Text content
    display: none; // Hide by default
    position: absolute;
    
    // Float over button and center
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
    
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    background-color: #313131;
    white-space: nowrap;
    z-index: 1;
  }
    
  // Show tooltip when mouse moves into button
  &:hover {
    &::after {
      display: block;
    }
  }
}

The results are as follows:

Multidirectional, thematic, animation implementations can follow one of my previous articles: Implementing Instructional Toolltip Text Tips with css'content_

5. Calculate the number of checkbox es selected

<form>
  <input type="checkbox" id="one">
  <label for="one">Boba Milk Tea</label>
  <input type="checkbox" id="two">
  <label for="two">Roasted milk</label>
  <input type="checkbox" id="three">
  <label for="three">Coffee</label>
  
  <!-- Input Result -->
  <div class="result">Selected:</div>
</form>

form {
  counter-reset: count 0;
  
  // When checkbox is selected, the counter increments by 1
  input[type="checkbox"] {
    &:checked {
      counter-increment: count 1;
    }
  }
  
  // Output Results
  .result {
    &::after {
      content: counter(count);
    }
  }
}

The results are as follows:

6. Add chapter counts to the catalog

<!-- chapter -->
<ul class="section">
  <li>
    <h1>Introduce oneself to</h1>

    <!-- Subchapters -->
    <ul class="subsection">
      <li>
        <h2></h2>
      </li>
      <li>
        <h2></h2>
      </li>
    </ul>
  </li>
  
  <li>
    <h1>Write a paragraph css Code</h1>
  </li>
</ul>

// chapter
.section {
  counter-reset: section 0; // Outer Counter

  h1 {
    &::before {
      counter-increment: section 1; // Self-increasing 1
      content: "Section"counter(section) ". ";
    }
  }

  // Subchapters
  .subsection {
    counter-reset: subsection 0; // Inner Counter

    h2 {
      &::before {
        counter-increment: subsection 1; // Self-increasing 1
        content: counter(section) "."counter(subsection); // Counters are scoped, where outer counters can be accessed
      }
    }
  }
}

Show as follows:

7. Loading...Animation

<p>Loading</p>

p {
  &::after {
    content: ".";
    animation: loading 2s ease infinite;

    @keyframes loading {
      33% {
        content: "..";
      }

      66% {
        content: "...";
      }
    }
  }
}

The results are as follows:

8. No more data

<div class="no-more">No more data</div>

.no-more {
  &::before {
    content: "-";
    margin-right: 10px;
  }


  &::after {
    content: "-";
    margin-left: 10px;
  }
}

The results are as follows:

summary

Content always needs to be used with before and after pseudo elements, mainly to show some additional information, more cases need to be excavated, as long as the brain is big and the length is long, if there are errors in content or knowledge points, please correct them!

Future Recommendations

contenteditable and user-modify can also play like this

css obscures the human ear. Is this probably the easiest way to achieve this?Neodymium

css sauce operation you may not know - form validation

Last

At the end of this article, I hope the above will help you a little. If you like it, please remember to pay attention to it with a little approval.

Is my QR code not big enough?

More exciting content is available on the WeChat public number "Don't write front-end". We will update the latest and practical front-end skills/technical articles from time to time. Welcome to your attention