content attribute of css

The content attribute is generally used in:: before,:: after pseudo elements to render the content of pseudo elements. Usually, we use the most value of content attribute to give a pure character. In fact, there are many values to choose from.

1. Insert plain 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 plain character';
    }
</style>

<body>
    <h1>1,Insert plain character</h1>
    <div class="content only-text"></div>
</body>

2. Insert picture

<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 picture</h1>
    <div class="content fill-image"></div>
</body>

3. Insert element attribute

<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 properties</h1>
    <div class="content fill-dom-attr" data-title="I am.fill-dom-attr Elemental data-title Attribute value"></div>
</body>

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

This feature can be used for rule introduction of the active 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 adder a name, it will only accumulate the index of the li tag, and the div in the middle of the li element will not notice */
        counter-increment: my;
    }
    .fill-dom-index li div::before{
        /* Calculator with the specified name */
        content: counter(my)'- ';
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>4,Insert current element number(Current element index)</h1>
    <div class="content fill-dom-index">
        <ul>
            <li><div>I'm the first li Label</div></li>
            <div>I am li 1st in tag div Label</div>
            <li><div>I'm the second li Label</div></li>
            <li><div>I'm the third li Label</div></li>
            <div>I am li 2nd in tag div Label</div>
            <li><div>I'm the fourth li Label</div></li>
            <li><div>I'm the fifth li Label</div></li>
        </ul>
    </div>
</body>

5. Insert the current element number (specify the 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. The 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 current element number(Designated species)</h1>
    <div class="content fill-dom-index2">
        <ul>
            <li><div>I'm the first li Label</div></li>
            <div>I am li 1st in tag div Label</div>
            <li><div>I'm the second li Label</div></li>
            <li><div>I'm the third li Label</div></li>
            <div>I am li 2nd in tag div Label</div>
            <li><div>I'm the fourth li Label</div></li>
            <li><div>I'm the fifth li Label</div></li>
        </ul>
    </div>
</body>

Tags: Front-end Attribute calculator

Posted on Tue, 03 Dec 2019 05:45:35 -0800 by ttmt