This is the 15th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

preface

When I was studying CSS recently, I really used Content a lot. For example, here are two ways to beautify lists that you didn’t know! Use content to beautify lists, and in this post, try these Solutions without Dynamically tweaking text! Content +attr is used to implement dynamic gradient text. There are other articles that also use Content. So I decided to sort out the content, my app.

The MDN lists the various things that content can set. Such as colors, pictures, emoticons, Unicode and so on. Those interested can do their own research:

Developer.mozilla.org/zh-CN/docs/…

::maker + content

::maker is used to modify the Maker box in list item. This applies to any element or pseudo-element with display: list-item set. It supports setting content.

Li: the NTH - child (2) : : marker {content: "🍔 🍟 🍗"; }Copy the code

::before/::after +content

This combination should be the most common in CSS. You can do a lot of fun CSS with this combination.

1. One of the implementation schemes of gradient text content+attr()

Attr () is used to retrieve an HTML attribute value of an element. Currently, only content is supported.

<p data-text=" I am dynamic gradient text!" > < p style = "max-width: 100%; clear: both; min-height: 1em; </p>Copy the code

In this scheme, the idea is to use content+attr to get the data-text attribute of the P tag, and then overlay the content on the P tag to produce superposition effect.

2. :; After + Content make some graphics

In this scenario, content is typically set to an empty string so that pseudo-elements can be rendered.

For example, to create an evil triangle bubble using false elements and divs, you could write this

.bubble-box::after {
    content: "";
    position: absolute;
    border:10px solid transparent;
    border-top-color: #409eff;
    border-right-color: #409eff;
    right: 100%;
    top: 10%;
    transform: skewY(10deg);
}

Copy the code

By positioning to one side of the div

3. ::before+content Changes the list style

ul/ol{ list-style-type: none; } li::before {content: '🤤 '; }Copy the code

4. Reference symbols

Content provides open-quote, close-quote, no-open-quote, and no-close-quote to easily enclose text in quotation marks.

 p::before {
        content: open-quote;
      }
      p::after {
        content: close-quote;
      }
Copy the code

Of course, quotes aren’t that weak, so you can use quotes to define your own symbols.

P {quotes: "" "" "" "; }Copy the code

counter

This is my favorite attribute to use, “still using JS counting? Try pure CSS counters!!” Usage is described in detail in this article.

p {
        counter-increment: myCounter 1;
      }
      p::before {
        content: counter(myCounter);
      }
         <p>content 1</p>
    <p>content 2</p>
    <p>content 3</p>
Copy the code