css3 content attribute-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

css3 content attribute

伊谢尔伦

Feb 03, 2017 pm 02:08 PM

There are four main pseudo-elements in CSS: before/after/first-letter/first-line. In the before/after pseudo-element selector, there is a content attribute that can insert content into the page.

Insert plain text

content: "Inserted article", or content:none does not insert content

#html
<h1 id="这是h">这是h1</h1>
<h2 id="这是h">这是h2</h2>
#css
h1::after{
    content:"h1后插入内容"
}
h2::after{
    content:none
}

Embedded text symbols

You can use the content attribute The open-quote attribute value and the close-quote attribute value add nested literal symbols such as brackets, single quotes, and double quotes on both sides of the string. open-quote is used to add the starting text symbol, and close-quote is used to add the ending text symbol. Modify the above css:

h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

Insert picture

content attribute can also insert pictures directly before/after the element

#html
<h3 id="这是h">这是h3</h3>

#css
h3::after{
    content:url(图片路径)
}

Insert attribute value of element

The content attribute can directly use attr to obtain the attributes of the element and insert it into the corresponding position.

#html
<a href="http://www.php.cn">这是链接</a>

#css
a:after{
    content:attr(href);
}

Insert item number

Use the counter attribute of content to append consecutive numbers to multiple items.

#html
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>
<h1 id="大标题">大标题</h1>
<p>文字</p>

#css
h1:before{
    content:counter(my)&#39;.&#39;;
}
h1{
    counter-increment:my;
}

Item number modification

The default inserted item number It is numerical, 1,2,3. . . Automatic increment, you can also add text and styles to the project number. Still use the above html, css modification as follows:

h1:before{
    content:&#39;第&#39;counter(my)&#39;章&#39;;
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Specify number type

Use content (counter name, number type) format The syntax specifies the numbering type. The reference to the numbering type can be based on the list-style-type attribute value of ul. Using the above html, the css is modified as follows:

h1:before{
    content:counter(my,upper-alpha);
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

Number nesting

Large numbers are nested within medium numbers, and medium numbers are nested within small numbers.

#html
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1 id="大标题">大标题</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>

#css
h1::before{
    content:counter(h)&#39;.&#39;;
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)&#39;.&#39;;
    margin-left:40px;
}
p{
    counter-increment:p;
}

It can be found in the output of the example that the numbers of p are consecutive. If you renumber the three p's after each h1, you can use the counter-reset attribute to reset it. Modifying the css of the above h1:

h1{    
    counter-increment:h;    
    counter-reset:p;
}

can also achieve more complex nesting, such as three-level nesting. .

#html
<h1 id="大标题">大标题</h1>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>
<h1 id="大标题">大标题</h1>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>
<h2 id="中标题">中标题</h2>
<h3 id="小标题">小标题</h3>
<h3 id="小标题">小标题</h3>

#css
h1::before{
    content:counter(h1)&#39;.&#39;;
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) &#39;-&#39; counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
    margin-left:40px;
}
h3::before{
    content:counter(h1) &#39;-&#39; counter(h2) &#39;-&#39; counter(h3);
}
h3{
    counter-increment:h3;
    margin-left:80px;
}

The complete DEMO is given below

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS content</title>
<style>
.string p:after {
    margin-left: -16px;
    background: #fff;
    content: "支持";
    color: #f00;
}

.attr p:after {
    content: attr(title);
}

.url p:before {
    content: url(https://img.php.cn/upload/article/000/000/009/587d87ecca52d563.jpg);
    display: block;
}

.test ol {
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.counter1 li {
    counter-increment: testname;
}

.counter1 li:before {
    content: counter(testname)":";
    color: #f00;
    font-family: georgia,serif,sans-serif;
}

.counter2 li {
    counter-increment: testname2;
}

.counter2 li:before {
    content: counter(testname2,lower-roman)":";
    color: #f00;
    font-family: georgia,serif,sans-serif;
}

.counter3 ol ol {
    margin: 0 0 0 28px;
}

.counter3 li {
    padding: 2px 0;
    counter-increment: testname3;
}

.counter3 li:before {
    content: counter(testname3,float)":";
    color: #f00;
    font-family: georgia,serif,sans-serif;
}

.counter3 li li {
    counter-increment: testname4;
}

.counter3 li li:before {
    content: counter(testname3,decimal)"."counter(testname4,decimal)":";
}

.counter3 li li li {
    counter-increment: testname5;
}

.counter3 li li li:before {
    content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";
}
</style>
</head>
<body>
<ul>
    <li>
        <strong>string：</strong>
        <p>你的浏览器是否支持content属性：否</p>
    </li>
    <li>
        <strong>attr：</strong>
        <p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>
    </li>
    <li>
        <strong>url()：</strong>
        <p>如果你看到图片则说明你目前使用的浏览器支持content属性</p>
    </li>
    <li>
        <strong>counter(name)：</strong>
        <ol>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    </li>
    <li>
        <strong>counter(name,list-style-type)：</strong>
        <ol>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ol>
    </li>
    <li>
        <strong>counter(name)拓展应用：</strong>
        <ol>
            <li>列表项
                <ol>
                    <li>列表项
                        <ol>
                            <li>列表项</li>
                            <li>列表项</li>
                        </ol>
                    </li>
                    <li>列表项</li>
                </ol>
            </li>
            <li>列表项
                <ol>
                    <li>列表项</li>
                    <li>列表项</li>
                </ol>
            </li>
            <li>列表项
                <ol>
                    <li>列表项</li>
                    <li>列表项</li>
                </ol>
            </li>
        </ol>
    </li>
</ul>
</body>
</html>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

WebStorm Mac version

Useful JavaScript development tools

Hot Topics

Where is the login entrance for gmail email?

7488

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers