CSS content属性的使用
content属性与 :before 及 :after 伪元素配合使用,用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。
语法:
content:normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url| initial|inherit;
属性值:
● normal:设置默认值。如果内容属性正常,则设置内容。
Element::before|after { content: normal; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p::before { content: "Welcome "; } a::before { content: normal; } </style> </head> <body> <p id="a">you</p> <p>you</p> </body> </html>
输出:
Welcome you Welcome you
● none:不设置伪元素::before或::after的内容。
Element::before|after { content: none; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p::before { content: "Hello "; } p#a::before { content: none; } </style> </head> <body> <p>world!</p> <p id="a"> world!</p> </body> </html>
输出:
Hello world! world!
● initial:它将属性设置为其默认值。
Element::before|after { content: initial; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p::before { content: "Welcome "; } a::before { content: initial; } </style> </head> <body> <p>world!</p> <p id="a">you!</p> </body> </html>
输出:
Welcome world! Welcome you!
● attr:设置包含指定值的属性值。
Element::before|after { content:attr(href); }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> a::after { content: attr(href); } </style> </head> <body> <a href="https://www.html.cn">点击这里! </a> </body> </html>
输出:
● String:用于在HTML元素之前和之后生成任何字符串。
Element::before|after { content: string; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /* 使用的字符串值 */ p::before { content: "Hello "; } </style> </head> <body> <p>World!</p> </body> </html>
输出:
Hello World!
● open-quote:它在元素前后生成左引号。
Element::before|after { content: open-quote; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p::before { content: open-quote; } </style> </head> <body> <p>Hello World!</p> </body> </html>
输出:
"Hello World!
● close-quote:在元素前后生成右引号。
Element::before|after { content: close-quote; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p::after { content: close-quote; } p::before { content: open-quote; } </style> </head> <body> <p>Hello World!</p> </body> </html>
输出:
"Hello World!"
● no-open-quote:如果指定左引号,它将从内容中删除左引号。
Element::before|after { content: no-open-quote; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p::before { content: open-quote; } p::before { content: no-open-quote; } </style> </head> <body> <p>Hello World!</p> </body> </html>
输出:
Hello World!
● no-close-quote:如果指定右引号,它将从内容中删除右引号。
Element::before|after { content: no-close-quote; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> p::before { content: close-quote; } p::before { content: no-close-quote; } </style> </head> <body> <p>Hello World!</p> </body> </html>
输出:
Hello World!
● inherit:继承自其父元素。
Element::before|after { content: inherit; }
浏览器支持
content属性支持的浏览器如下所示:
● Google Chrome 1.0
● Internet Explorer 8.0
● Firefox 1.0
● Safari 1.0
● Opera 4.0
以上就是CSS的content属性怎么用?的详细内容,更多请关注易知道|edz.cc其它相关文章!