Specific use of CSS content attribute

The content attribute is generally used in the ::before and ::after pseudo-elements to present the content of the pseudo-elements. Usually, the most commonly used content attribute value is a pure character, but there are actually many other values to choose from.

1. Insert pure characters

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.only-text::before{
        content: 'Insert pure characters';
    }
</style>

<body>
    <h1>1. Insert pure characters</h1>
    <div class="content only-text"></div>
</body>

2. Insert pictures

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-image::before{
        content: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png');
    }
</style>

<body>
    <h1>2. Insert pictures</h1>
    <div class="content fill-image"></div>
</body>

3. Insert element attributes

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-dom-attr::before{
        content: attr(data-title);
    }
</style>

<body>
    <h1>3. Insert element attributes</h1>
    <div class="content fill-dom-attr" data-title="I am the data-title attribute value of the .fill-dom-attr element"></div>
</body>

4. Insert the current element number (i.e. the current element index)

This feature can be used to introduce the rules of the event page.

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index li{
        position: relative;
        /* Give the counter a name. It will only add the index of the li tag. The div in the middle of the li element will not be taken into account*/
        counter-increment: my;
    }
    .fill-dom-index li div::before{
        /* Use the calculator with the specified name */
        content: counter(my)'- ';
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>4. Insert the current element number (i.e. the current element index)</h1>
    <div class="content fill-dom-index">
        <ul>
            <li><div>I am the first li tag</div></li>
            <div>I am the first div tag in the li tag</div>
            <li><div>I am the second li tag</div></li>
            <li><div>I am the third li tag</div></li>
            <div>I am the second div tag in the li tag</div>
            <li><div>I am the 4th li tag</div></li>
            <li><div>I am the 5th li tag</div></li>
        </ul>
    </div>
</body>

5. Insert the current element number (specify type)

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index2 li{
        position: relative;
        counter-increment: my2;
    }
    .fill-dom-index2 li div::before{
        /* The second parameter is list-style-type, available values are as follows: http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
        content: counter(my2,lower-latin)'- ';
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>5. Insert the current element number (specify type)</h1>
    <div class="content fill-dom-index2">
        <ul>
            <li><div>I am the first li tag</div></li>
            <div>I am the first div tag in the li tag</div>
            <li><div>I am the second li tag</div></li>
            <li><div>I am the third li tag</div></li>
            <div>I am the second div tag in the li tag</div>
            <li><div>I am the 4th li tag</div></li>
            <li><div>I am the 5th li tag</div></li>
        </ul>
    </div>
</body>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Summary of essential knowledge points for MySQL query optimization

>>: docker logs - view the implementation of docker container logs