CSS的content属性怎么用？

CSS中的Content属性用于动态生成内容（在运行时）；该属性可以与伪元素::before或::after一起使用，用于插入生成内容。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。

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属性怎么用？相关推荐

网页使用Font Awesome图标字体时，css定义 content 属性
网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示: .icon:before { content: '\f005'; font-famil ...
css的content属性，以及如何通过css content属性实现css计数器？
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>cs ...
CSS中content属性的妙用
前言本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
css的content属性
content属性一般用于::before.::after伪元素中,用于呈现伪元素的内容.平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择. 1.插入纯字符 <st ...
[css] CSS content属性特殊字符有哪些？
[css] CSS content属性特殊字符有哪些? 今天在做开发的时候,需要用到CSS的content属性,加入一些特殊字符来实现网页效果.但是特殊字符那么多,怎么可能记得住,所以谷歌百度搜索之后 ...
常用的HTML和CSS content属性特殊字符归纳
今天在做开发的时候,需要用到CSS的content属性,加入一些特殊字符来实现网页效果.但是特殊字符那么多,怎么可能记得住,所以谷歌百度搜索之后找到了一个比较全的,在这里进行归纳备忘,为了和我有相同需 ...
【CSS系列】被忽略的content属性
CSS的 content属性,大家应该都不陌生,很多时候我们都使用过,一般情况下你看到最多的用法无外乎这样两种:一种用于清除浮动,一种用于我们经常使用的字体图标. .clear:after {cont ...
css4个伪元素,CSS_CSS3中的content属性使用示例，CSS中主要的伪元素有四个：befo - phpStudy...
CSS3中的content属性使用示例 CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte ...
css：before和after中的content属性
css有一个属性叫做content.content只能使用在:after和:before之中.它用于在元素之前或者元素之后加上一些内容就像这样: .email-address:before { co ...

CSS的content属性怎么用？

CSS的content属性怎么用？相关推荐

最新文章

热门文章