1. 首页
  2. CSS 菜鸟教程
  3. CSS - Content 属性

CSS - Content 属性

CSS Content 属性用于将元素或伪元素的内容替换为生成的值，以便更改显示的输出。

  • 它管理元素的正常呈现方式，或者何时使用图像和相关的 alt 文本代替元素。
  • 它将内容定义为图片、文本、两者兼而有之，或者在伪元素和边距框的情况下根本不是，从而决定元素是否呈现。
  • 匿名替换的元素是使用 content 属性引入的元素。

可能的值

  • none - 当直接应用于元素时，它不起作用;当用于伪元素时，它不会生成伪元素。
  • normal - 页面边距框和普通元素的默认值为 contents，但伪元素（如 ::before 和 ::after ）的计算为零。
  • <string> - 字符串是封装在匹配的单引号或双引号中的字符序列。在 CSS 中可以连接多个字符串值，而无需特殊的连接运算符。
  • <image> - CSS 中的可显示图像由 <image> 表示，它可以作为 image-set（）、<gradient>、url（） 或由 element（） 函数定义的网页本身的一部分给出。
  • <counter> - 在 CSS 中，计数器（通常是数字）通过 <counter-reset> 和 <counter-increment> 属性生成，由 <counter> 值表示，可以使用 counter（） 或 counters（） 方法显示。
    • counter（） - 类似于 counter（name） 或 counter（name， style），显示具有指定样式 <list-style-type>（默认为十进制）的文本，该样式表示伪元素范围内具有给定名称的最内层计数器的值。
    • counters（） - 以 counter（name， string） 或 counter（name， string， style） 形式生成文本，在伪元素中显示具有指定名称的最内层计数器的值，使用提供的 <list-style-type> 进行格式化，默认选择小数。
  • <quote> - 根据语言和位置而变化的关键字包含在 <quote> 数据类型中。
    • open-quote 和 close-quote - 在 quotes 属性中定义的匹配字符串用于替换这些值。
    • no-open-quote 和 no-close-quote - 不添加内容，但调整报价的嵌套级别，增加或减少它。
  • attr（x） - CSS 函数 attr（x） 从源元素或选定元素中检索属性的值，根据文档语言生成空字符串或未解析的字符串。
  • alternative text: / <string> | <counter>  - 在支持它的浏览器中，在 <content-list> 项中的文本字符串或计数器前使用正斜杠作为替代文本，这适用于屏幕阅读器，但在不受支持的浏览器中可能会被忽略，<string> 或 <counter> 表示替代文本。

语法

content = normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]? | <element()>

适用于

所有元素、遵守树的伪元素和页边距框

CSS Content - 追加字符串

在以下示例中，字符串根据其分配的类动态追加到列表项的内容中。

<html>
<head>
<style>
	 	.featured::before {
	 	 	 content: "Top Pick: ";
	 	 	 font-weight: bold;
	 	 	 color: #4CAF50;
	 	}
	 	.course-item {
	 	 	 position: relative;
	 	}
	 	.course-item::after {
	 	 	 content: " Enroll Now!";
	 	 	 position: absolute;
	 	 	 bottom: 0;
	 	 	 right: 0;
	 	 	 font-style: italic;
	 	 	 color: #1565c0;
	 	}
</style>
</head>
<body>
<h2>Featured Online Courses</h2>
<ul>
	 	<li class="featured">Web Development Bootcamp</li>
	 	<li class="course-item">Data Science Essentials</li>
	 	<li>Graphic Design Mastery</li>
	 	<li class="course-item">Digital Marketing Fundamentals</li>
</ul>
</body>
</html>

CSS Content - 行情

在以下示例中，引号文本由对比鲜明的彩色引号整齐地框住，从而增加了其视觉效果。

  • 使用较大的红色引号和浅灰色背景，与绿色文本形成对比。
  • 生成的引号类型取决于语言，可以通过将 content 属性值设置为 no-open-quote 和/或 no-close-quote 来关闭，或者将 quotes 属性设置为 none。
<html>
<head>
	 <style>
	 	q {
	 	 	 color: #008000;
	 	}
	 	q::before,
	 	q::after {
	 	 	 font-size: larger;
	 	 	 color: #800000;
	 	 	 background: #f0f0f0;
	 	}
	 	q::before {
	 	 	 content: open-quote;
	 	}
	 	q::after {
	 	 	 content: close-quote;
	 	}
</style>
</head>
<body>
<h1>Welcome to the Wisdom Corner</h1>
<p>Albert Einstein once said, <q cite="https://www.brainyquote.com/quotes/albert_einstein_133991"> The only source of knowledge is experience.</q> Let's embrace our experiences and learn from them to gain wisdom.</p>
<p lang="de-de"> In einem berühmten Zitat sagte Johann Wolfgang von Goethe, <q lang="de-de"> Man sieht nur das, was man weiß. </q>. This reminds us that knowledge shapes our perception.</p>
<p>As we navigate the vast sea of information on the internet,<q> It's crucial to distinguish between knowledge and misinformation.</q> Let's be discerning in our digital journeys.</p>
<p lang="es-es"> En palabras de Pablo Picasso, <q lang="es-es"> La inspiración existe, pero tiene que encontrarte trabajando. </q>. True creativity often comes from the dedication to our craft.</p>
<footer><p>Stay curious and keep exploring the depths of knowledge!</p></footer>
</body>
</html>

CSS Content - 向列表项计数器添加文本

  • 以下示例使用夹在两个 <strings> 之间的计数器为其中的列表项创建详细的标记。
  • 在此示例中，通过在两个<字符串>之间放置计数器，为无序列表中的列表项创建详细标记。
  • 内容中的每个项目都有一个前缀、一个空格、一个空格、一个冒号和另一个空格。在大多数浏览器中，counters（） 方法定义了一个由句点分隔的数字项计数器。
<html>
<head>
<style>
	 	div {
	 	 	 background-color: #f0f0f0;
	 	 	 padding: 10px;
	 	 	 margin: 10px;
	 	 	 border: 1px solid #ccc;
	 	 	 border-radius: 5px;
	 	}
	 	h2 {
	 	 	 color: #008080;
	 	}
	 	ol {
	 	 	 counter-reset: chapters;
	 	 	 margin-left: 4em;
	 	}
	 	li {
	 	 	 counter-increment: chapters;
	 	}
	 	li::marker {
	 	 	 content: "Chapter " counters(chapters, ".", decimal-leading-zero) ": ";
	 	 	 color: #800000;
	 	 	 font-weight: bold;
	 	}
</style>
</head>
<body>
<div>
<h2>Contents</h2>
<ol>
	 	<li>Introduction</li>
	 	<li>Part I: The Adventure Starts
	 	 	 <ol>
	 	 	 	 	<li>Setting the Scene.</li>
	 	 	 	 	<li>Getting to know the Characters.</li>
	 	 	 	 	<li>Revealing Secrets.</li>
	 	 	 </ol>
	 	</li>
	 	<li>Part II: Difficulties Are Ahead.
	 	 	 <ol>
	 	 	 	 	<li>Taking On Opponents.</li>
	 	 	 	 	<li>Getting around in the Dark.</li>
	 	 	 	 	<li>Gathering Supporters.</li>
	 	 	 </ol>
	 	</li>
	 	<li>Conclusion</li>
</ol>
</div>
</body>
</html>

CSS content - 具有属性值的字符串

  • 以下示例使用属性选择器来定位安全链接，并设计用于打印样式表。
  • 使用 ：：after 伪元素，它将 href 属性的值附加到链接内容之后。
  • 生成的内容显示为 URL： [href value]，用括号括起来，这改进了安全链接以适合打印的格式呈现的方式。
<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	 	 	 background-color: #f8f8f8;
	 	 	 color: #333;
	 	 	 margin: 0;
	 	 	 padding: 0;
	 	}
	 	header {
	 	 	 background-color: #2c3e50;
	 	 	 color: #ecf0f1;
	 	 	 padding: 1em;
	 	 	 text-align: center;
	 	}
	 	ul {
	 	 	 list-style-type: none;
	 	 	 margin: 0;
	 	 	 padding: 0;
	 	}
	 	li {
	 	 	 margin: 0.5em 0;
	 	}
	 	a {
	 	 	 text-decoration: none;
	 	 	 color: #3498db;
	 	 	 font-weight: bold;
	 	}
	 	a:hover {
	 	 	 color: #e74c3c;
	 	}
	 	a[href^="https://"]::after {
	 	 	 content: " (Explore: " attr(href) ")";
	 	 	 color: #27ae60;
	 	 	 font-style: italic;
	 	 	 font-size: 0.8em;
	 	 	 margin-left: 0.5em;
	 	}
</style>
</head>
<body>
<header>
<h1>Web Adventures</h1>
</header>
<nav>
<ul>
	 	<li><a href="https://tutorialspoint.com/bootstrap/">Bootstrap</a></li>
	 	<li><a href="https://www.qikepu.com/html">HTML</a></li>
	 	<li><a href="hhttps://www.qikepu.com/css">CSS</a></li>
	 	<li><a href="https://www.qikepu.com/javascript">Javascript</a></li>
</ul>
</nav>
</body>
</html>

CSS 自定义 - 添加带有替代文本的图像

在以下示例中，a：：before 伪元素用于在链接文本之前插入图像。

对于不启用图像渲染的浏览器，它包含占位符图片形式的替代文本和回退材料。

<html>
<head>
<style>
	 	a::before {
	 	 	 /* Fallback content */
	 	 	 content: url("https://www.qikepu.com/css/images/css-mini-logo.jpg")
	 	 	 	 	" - alt text is not supported - ";
	 	 	 /* Content with alternative text */
	 	 	 content: url("https://www.qikepu.com/css/images/css-mini-logo.jpg") /
	 	 	 	 	" VISIT EXAMPLE: ";
	 	 	 font: italic small-caps 25px/2.5 'Georgia', serif;
	 	 	 margin-right: 10px;	
	 	}
</style>
</head>
<body>
	 <a href="https://www.qikepu.com/"> Explore Example Website</a>
</body>
</html>

CSS content - 用 url（） 替换元素

在给出的示例中，content： url（） CSS 属性用于动态替换 #custom 替换元素的内容，并使用 URL“content.png”提供的图像。此外，如果不允许替换元素，则 span：：after 选择器会提供回退功能，该选择器会在括号中显示元素的 ID 属性。

<html>
<head>
<style>
	 	#custom-replacement {
	 	 	 height: 300px;
	 	 	 width: 300px;
	 	 	 content: url("images/content.png");
	 	}
	 	/* Fallback content in case element replacement is supported */
	 	span::after {
	 	 	 content: " (ID: " attr(id) ")";
	 	 	 color: #888;
	 	}
</style>
</head>
<body>
	 <span id="custom-replacement">This content is replaced!</span>
</body>
</html>

CSS content - 用<梯度>替换元素

在以下示例中，元素的内容被 CSS 渐变替换，更准确地说，是 linear-gradient（）。

对于同时启用元素内容替换和替代文本的浏览器，@supports 规则用于提供替换文本支持并引入 repeating-linear-gradient（）。

<html>
<head>
<style>
	 	.container {
	 	 	 border: 2px solid #e74c3c;
	 	 	 background-color: #f9e79f;
	 	 	 min-height: 200px;	
	 	 	 min-width: 200px;	
	 	 	 padding: 20px;	
	 	}
	 	#altered {
	 	 	 content: linear-gradient(#3498db, #2ecc71);
	 	}
	 	@supports (content: linear-gradient(#000, #fff) / "custom content") {
	 	 	 #altered {
	 	 	 	 	content: repeating-linear-gradient(rgba(52, 152, 219, 0.8) 0, #e67e22 20%) /
	 	 	 	 	"Transformed styling with custom content";
	 	 	 }
	 	}
</style>
</head>
<body>
<div class="container" id="altered">Click Here</div>
</body>
</html>
<< CSS - columns 属性 CSS - counter-increment 属性 >>