How to maximize the operation and value of CSS 'content 💢

Content attributes need to be used together with before and after pseudo-elements to define the content displayed by the pseudo-elements. This article mainly lists the optional values of content and practical cases and skills 🎃

Basic usage

A simple example:

<p> "can't write front-end" </p>Copy the code

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

  &::after {
    content: "Wechat Official Account"}}Copy the code

The browser displays this subchild:

Let’s look at the structure actually rendered in the browser:

Yes, it is so rough, like their name, one after another 😁

It’s worth noting that in the new specification, single colons refer to pseudo-classes and double colons to pseudo-elements, and even if you write :after, standard browsers will render ::after, which is compatible with the older 👍

The value of the option

Normal character
unicode
attrfunction
urlfunction
counterfunction
cssvariable

By using

For brevity, some of the following content attributes omit the parent element in the outer layer:

// original p {&::after {content:""; }} // after omitted content:"";
Copy the code

1. Common characters

content: "I am the content of words.";
Copy the code

2. unicode

Special characters of the browser:

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

The following information is displayed:

HTML special character mapping table

Iconfont Custom font icon:

<span class="icon icon-close"></span>
Copy the code

@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";
}
Copy the code

The following information is displayed:

Iconfont – Alibaba vector icon library

3. Attr function

As the name implies, this function gets the value of an attribute in an HTML element, such as ID, class, style, and so on 😍

<p data-content="I am the content of words."></p>
Copy the code

content: attr(data-content);
Copy the code

4. The url function

Display my nuggets avatar:

content: url("https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/7/16c681a0fb3e84c4~tplv-t2oaga2asx-image.image");
Copy the code

The following information is displayed:

5. Counter function

The counter function inserts the value of the counter and displays the value of the counter with the content property 🎲. Before using this function, you should be aware of the two properties counter-reset and counter-increment😎

Counter -reset defines a counter:

counter-reset: count1 0; // declare a counter count1 and count from 0 counter-reset: count2 1; Count3 0 count4 0 count5 0; count3 0 count4 0 count5 0; // Declare multiple countersCopy the code

Counter increment increments the value of a counter;

counter-reset: count 0; counter-increment: count 2; // Increment counterincrement: count-2; // Increment counterincrement: count-2; // Increments count by -2. The current count is -2Copy the code

Note that the value of count is not changed back to 0, which can be interpreted as style overwriting, as shown in the following code:

div { width: 100px; width: 200px; // Actual render width}Copy the code

6. CSS variables

If the variable is of type string, it can be displayed directly. If the variable is of type int, it needs to use the counter function 😒

// String type --name:"Can't write a front end."; p { &::after { content: var(--name); / / show"Can't write a front end."}} -- -- -- -- -- -- -- -- -- -- I'm line -- -- -- -- -- -- -- -- -- - / / int type -- count: 60; p { &::after { counter-reset: color var(--count); content: counter(count); / / show"60"}} -- -- -- -- -- -- -- -- -- -- I'm line -- -- -- -- -- -- -- -- -- - / / not supported by the type and condition - count: 60.5. / / show"0"--count: 60px; / / show"", CSS attribute values are not supportedCopy the code

Joining together

Ordinary string concatenation:

content: "xxx" + "xxx";
Copy the code

String concatenation function:

// We can't use the + hyphen, or we can't use Spaces."I support it." attr(xx);
count: "My nuggets head:" url("xxxxx");
content: "The counter value is:" counter(xx);
Copy the code

Implicit conversion:

content: 0; / / show""
content: ""+ 0; / / show"0"
content: ""+ attr(name); / / show"attr(name)"
Copy the code

A practical case

1. When label A is empty, label A is displayed`href`Property values:

<a href="https://juejin.cn/user/2911162518997064"></a>
Copy the code

a {
  &:empty {
    &::after {
      content: "Link content:"attr(href); }}}Copy the code

The following information is displayed:

2. Breadcrumbs and separator

<ul> <li> Home </li> <li>Copy the code

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

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

The following information is displayed:

I wrote it earlier: 😂

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

3. The progress bar

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

.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: inline-block; width: calc(100% * var(--percent) / 100); // width: 100%; // Prevent overflow height: inherit; text-align: right; background-color:#2486ff;}}Copy the code

The following information is displayed:

Add a transition effect:

transition: width 1s ease; // The first time the page enters, there is no transition effect because width must be changedCopy the code

You can’t have it both ways. If you only rely on CSS and want to trigger animation on the page for the first time, only animation can do it 😭

. Progress {&::before {// Remove width and transition properties animation: progress 1s ease forward; } @keyframes progress { from { width: 0; } to { width: calc(100% * var(--percent) / 100); }}}Copy the code

The page is refreshed as follows:

How to display CSSvar values with the Content attribute

4. The tooltip

<button data-tooltip="I am a reminder."> button < / button >Copy the code

[data-tooltip] { position: relative; &::after { content: attr(data-tooltip); Display: none; // Default hidden position: absolute; // Float above the button and center it 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; Hover {&::after {display: block; }}}Copy the code

The effect is as follows:

Multi-direction, theme, and animation implementations can be moved from my previous article: using CSS ‘Content to implement a command tooltip text prompt 🤡

5. Calculate the number of checkboxes

<form>
  <input type="checkbox" id="one">
  <label for="one"> </label> <inputtype="checkbox" id="two">
  <label for="two"> baked milk </label> <inputtype="checkbox" id="three">
  <label for="three"> Coffee </label> <! -- Input result --> <div class="result"> Selected: </div> </form>Copy the code

form { counter-reset: count 0; // When checkbox is checked, counter increment 1 input[type="checkbox"] { &:checked { counter-increment: count 1; Result {&::after {content: counter(count); }}}Copy the code

The effect is as follows:

6. Add section counts to directories

<! -- Section --> <ul class="section"> <li> <h1> Introduce yourself </h1> <! -- Subsection --> <ul class="subsection"> < li > < h2 > < / h2 > < / li > < li > < h2 > < / h2 > < / li > < / ul > < / li > < li > < h1 > write a CSS code < / h1 > < / li > < / ul >Copy the code

// section.section {counter-reset: section 0; // add counter h1 {&::before {counterincrement: section 1; // increment 1 content:"Section"counter(section) "."; Subsection. Subsection {counter-reset: Subsection 0; Interdepartmental counter h2 {&::before {counter-increment: Subsection 1; // increment 1 Content: counter(section)"."counter(subsection); // Counters are scoped, and the outer counter can be accessed here at}}}}Copy the code

The following information is displayed:

7. Loading… animation

<p> Loading </p>Copy the code

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

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

      66% {
        content: "..."; }}}}Copy the code

The effect is as follows:

8. No more data

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

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


  &::after {
    content: "——"; margin-left: 10px; }}Copy the code

The effect is as follows:

conclusion

Content always needs to be used with before and after pseudo-elements, mainly to show some additional information, more cases need to be explored, as long as the imagination is big 👍, the length is long, if there is any content or knowledge error, please correct!

Phase to recommend

To be reasonable, only 3 lines of core CSS code for the rate scoring component, I was myself show to scalp pins 🙆♂️

Contenteditable and user-modify can also be played 🌚️

CSS stealth wave effect 🌊, this is probably the simplest way to implement it, right? ️

The last

If you think this article is good, please don’t forget to like and follow 😊

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

How to maximize the operation and value of CSS ‘content 💢

Basic usage

The value of the option

By using

1. Common characters

2. unicode

3. Attr function

4. The url function

5. Counter function

6. CSS variables

Joining together

A practical case

1. When label A is empty, label A is displayed`href`Property values:

2. Breadcrumbs and separator

3. The progress bar

4. The tooltip

5. Calculate the number of checkboxes

6. Add section counts to directories

7. Loading… animation

8. No more data

conclusion

Phase to recommend

The last

How to maximize the operation and value of CSS ‘content 💢

Basic usage

The value of the option

By using

1. Common characters

2. unicode

3. Attr function

4. The url function

5. Counter function

6. CSS variables

Joining together

A practical case

1. When label A is empty, label A is displayedhrefProperty values:

2. Breadcrumbs and separator

3. The progress bar

4. The tooltip

5. Calculate the number of checkboxes

6. Add section counts to directories

7. Loading… animation

8. No more data

conclusion

Phase to recommend

The last

Related Posts

JS in Android/iOS WebView interface unification, easier to call

Why hasn’t Apple banned Flutter, and will it

R_scan for Flutter (file, URL, memory, camera)

1. When label A is empty, label A is displayed`href`Property values: