CSS content 属性以及 :before和 :after 伪元素

最新推荐文章于 2024-09-05 15:31:19 发布

ssisse

最新推荐文章于 2024-09-05 15:31:19 发布

阅读量2.5k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

87 篇文章 1 订阅

订阅专栏

CSS content 属性

定义和用法

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

说明

该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

可能的值

值	描述
none
normal
content specifications
inherit	规定应该从父元素继承 content 属性的值。

实例

下面的例子在每个链接后插入括号中的 URL：

<style type="text/css">
a:after
{content: " (" attr(href) ")"
}
</style>
</head>

<body>
<p><a href="http://www.w3school.com.cn">W3School</a> contains free tutorials and references.</p>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。</p>
</body>

结果如下：

CSS :before 伪元素

定义和用法

:before 伪元素在元素之前添加内容。

这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

实例

此样式会在每个 h1 元素之前播放一段声音：

<style type="text/css">
h1:before {content:url(/i/w3school_logo_white.gif)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
</body>