How to maximize the operation and value of CSS’ content

Time:2019-11-20

How to maximize the operation and value of CSS' content

contentAttributes need to be associated withbeforeandafterPseudo elements are used together to definePseudo elementThe contents shown in this paper are mainly listedcontentThe optional values and practical cases and skills of πŸŽƒ

Basic Usage

A simple example:

<p>Can't write front end</p>
p {
  &::before {
    Content: "welcome to follow"
  }

  &::after {
    Content: WeChat public number
  }
}

The browser shows this sub:
How to maximize the operation and value of CSS' content

Let’s look at the structure actually rendered in the browser:
How to maximize the operation and value of CSS' content

That’s right. It’s just so rude. It’s just like their names

It is worth noting that in the new specification, the single colon refers toPseudo class, double colonsPseudo elementEven if you write:after, the standard browser will still render as::after, to be compatible with the old way of writing

Desirable value

  1. Ordinary character
  2. unicode
  3. attrfunction
  4. urlfunction
  5. counterfunction
  6. cssvariable

Use one by one

To keep the article simple, here are some partscontentAttribute omits the parent element in the outer layer:

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

// after omission
content: "";

1. Common characters

Content: "I am the text content";

2. unicode

Special characters in browser:

p {
  &:after {
    content: "691";
    color: red;
  }
}

The display is as follows:
How to maximize the operation and value of CSS' content
HTML special character comparison table


iconfontCustom 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";
}

The display is as follows:

How to maximize the operation and value of CSS' content
Iconfont Alibaba vector icon library

3. Attr function

As the name implies, this function can gethtmlThe value of an attribute in the element, such asid、class、styleEt al

< P data content = "I am text content" ></p>
content: attr(data-content);

4. URL function

Show me my Nuggets head:

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

The display is as follows:

How to maximize the operation and value of CSS' content
The disadvantage is that you can’t control the size of the picture

5. Counter function

counterFunction is used to insert the value of the countercontentProperty can display the value in the counter. Before introducing the usage, you need to be familiar with two propertiescounter-resetFollowcounter-increment😎


counter-resetTo 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-incrementIncreasing the value of the counter can be understood asjavascriptMedium+=:

counter-reset: count 0;
Counter increment: count 2; // increase count by 2. The current value of count is 2
Counter increment: count - 2; // increase count by - 2. The current value of count is - 2

Note the counter herecountWhy doesn’t the value of0, which can be understood as style overlay, as follows:

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

6. CSS variables

When displaying variables, if the variables arestringType can be displayed directly, if yesintType, you need to borrowcounterFunction function

//String type
--Name: "can't write front end";

p {
  &::after {
    Content: VAR (- - name); // displayed as "front end will not be written"
  }
}

----------I'm the divider----------

// int type
--count: 60;

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

----------I'm the divider----------

//Types and conditions not supported
--Count: 60.5; // display as "0", decimal is not supported
--Count: 60px; // displayed as' ', CSS property value is not supported

Splicing

Normal string splicing:

content: "xxx" + "xxx";

String splicing function:

//You can't use the + connector or you don't need a space. It's just to distinguish
Content: "I support" attr (XX);
Count: "my Nuggets head:" URL ("xxxxx");
Content: "the counter value is:" counter (XX);

Recessive Transformation:

Content: 0; // displayed as ""
Content: "" + 0; // displayed as "0"
Content: "" + attr (name); // displayed as "attr (name)"

Practical case

1. When the content of label a is empty, it will be displayedhrefValue in property:

<a href="https://juejin.im/user/587e1822128fe1005706db1c"></a>
a {
  &:empty {
    &::after {
      Content: "the link content is:" attr (href);
    } 
  }
}

The display is as follows:
How to maximize the operation and value of CSS' content

2. Crumbs and separator

<ul>
  <li>Home page</li>
  <li>Merchandise</li>
  <li>Details</li>
</ul>
ul {
  display: flex;
  font-weight: bold;

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

The display is as follows:
How to maximize the operation and value of CSS' content
How to maximize the operation and value of CSS' content

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;
  }
}

The display is as follows:
How to maximize the operation and value of CSS' content

Add a transition effect:

Transition: width 1s ease; // there is no transition effect when entering the page for the first time, because width must change

How to maximize the operation and value of CSS' content

You can’t have both fish and bear’s paw if you only rely on itcss, if you want to trigger the animation effect for the first time on the page, onlyanimationTo achieve this goal

.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 effect of refreshing the page is as follows:
How to maximize the operation and value of CSS' content

Reference article: small tips: how to display cssvar variable value with content attribute

4. Tooltip prompt

< button data tooltip = "I'm a hint" > button < / button >
[data-tooltip] {
  position: relative;
  
  &::after {
    Content: attr (data toolip); // text content
    Display: none; // hidden 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 in button
  &:hover {
    &::after {
      display: block;
    }
  }
}

The effect is as follows:
How to maximize the operation and value of CSS' content

Multi direction, theme and animation implementation can move to an article I wrote before: using CSS’ content to implement instruction based tooltip text prompt

5. Calculate the number of checkboxes 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 the checkbox is selected, the counter will increase by 1
  input[type="checkbox"] {
    &:checked {
      counter-increment: count 1;
    }
  }
  
  //Output results
  .result {
    &::after {
      content: counter(count);
    }
  }
}

The effect is as follows:
How to maximize the operation and value of CSS' content

6. Add chapter count to the catalog

<! -- Chapter -- >
<ul class="section">
  <li>
    <h1>Self introduction</h1>

    <! -- subchapter -- >
    <ul class="subsection">
      <li>
        <h2></h2>
      </li>
      <li>
        <h2></h2>
      </li>
    </ul>
  </li>
  
  <li>
    <h1>Write a CSS code</h1>
  </li>
</ul>
// Chapter
.section {
  Counter reset: Section 0; // outer counter

  h1 {
    &::before {
      Counter increment: Section 1; // Auto increment 1
      content: "Section"counter(section) ". ";
    }
  }

  // sub chapters
  .subsection {
    Counter reset: subsection 0; // inner counter

    h2 {
      &::before {
        Counter increment: subsection 1; // Auto increment 1
        Content: counter (section) "." counter (subsection); // the counter has scope. You can access the outer counter here
      }
    }
  }
}

The display is as follows:
How to maximize the operation and value of CSS' content

7. Loading… Animation

<p>Loading</p>
p {
  &::after {
    content: ".";
    animation: loading 2s ease infinite;

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

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

The effect is as follows:
How to maximize the operation and value of CSS' content

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 effect is as follows:
How to maximize the operation and value of CSS' content

summary

contentAlways need to cooperatebeforeFollowafterPseudo elements are mainly used to display someadditionalMore cases need to be dug. As long as the brain hole is big and the length is long, please correct if there is something wrong with the content or knowledge points!

Recommended in the past

Contentable and user modify can still play like this

CSS is the most simple way to realize the wave dynamic effect, isn’t it? A kind of

CSS operations you may not know form validation

Last

At the end of this article, I hope the above content can help you a little. If you like it, please remember oneFabulousFollowfollow πŸ’¨

Is my QR code not big enough

How to maximize the operation and value of CSS' content

More wonderful content is in WeChat public."Can't write front end", will update the latest and practical front-end skills / technical articles from time to time, welcome to pay attention to 🌘