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

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

How can we animate using CSS?Apr 30, 2025 pm 03:17 PM

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PM

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)

How can we add gradients in CSS?Apr 30, 2025 pm 03:15 PM

The article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.

What are pseudo-elements in CSS?Apr 30, 2025 pm 03:14 PM

Article discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.

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

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

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

Roblox: Dead Rails - How To Tame Wolves

3 weeks agoByDDD

Blue Prince: How To Get To The Basement

3 weeks agoByDDD

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),