cssafter选择器 CSS :after 选择器

cssafter选择器

CSSafter选择器是CSS3中的一种新型选择器，它可以让我们在元素之后添加内容。它可以用来创建一些有趣的效果，例如在链接上显示一个小图标，或者在表单元素上显示一个错误信息。

.element::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(icon.png);
} 

使用CSSafter选择器时，必须使用content属性来设置要显示的内容。content可以是文本、图片、表情或其他内容。此外，还可以使用display、width、height和background-image等CSS属性来调整要显示的内容的外观。

CSS :after 选择器

CSS :after 选择器

完整CSS选择器参考手册

定义和用法

:after选择器向选定的元素之后插入内容。

:after是伪元素，并且它生成包含放置在元素中的内容之后的生成内容的伪元素。

使用content 属性来指定要插入的内容。

默认情况下，此伪元素是内联的，但是可以使用属性显示更改。

例子：

a.external:after  {content: " "  url(image.gif);)
p:after {content: " | ";}

---

实例

实例 1

每个<p>元素之后插入内容：

p:after
{
  content:"- Remember this";
}

实例 2

在每个 <p>之后插入的内容和样式:

p:after
{
  content:"- Remember this";
  background-color:yellow;
  color:red;
  font-weight:bold;
}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器
::after	4.0	9.0 部分从 8.0	3.5	3.1	7.0 部分从4.0

注意： after在IE8中运行，必须声明<!DOCTYPE> .

---

相关文章

CSS 教程: CSS Pseudo-elements

CSS 选择器参考手册: CSS :before 选择器

---