【CSS3】---:before :after生成内容

最新推荐文章于 2022-10-13 21:20:33 发布

weixin_30302609

最新推荐文章于 2022-10-13 21:20:33 发布

阅读量172

点赞数

原文链接：http://www.cnblogs.com/itguliang/p/4527682.html

版权

在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。

content配合CSS的伪类或者伪元素，一般可以做以下四件事情：

功能	功能说明
none	不生成任何内容
attr	插入标签属性值
url	使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）
string	插入字符串

实例展示：

在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：

.clearfix:before,

.clearfix:after {

       content:””;

       display:table;

}

.clearfix:after {

       clear:both;

       overflow:hidden;

}

上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。

假设我们有一个元素：

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {

  content:attr(title);

       color:#f00;

}

效果如下：

例子：

页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS生成内容</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>我是标题，在我前面插入内容吧</h1>
</body>
</html>

css

h1:before {
  content:"我是添加进来的";
  color: red;
}

效果

转载于:https://www.cnblogs.com/itguliang/p/4527682.html

weixin_30302609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS3】---:before :after生成内容

在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。content配合CSS的伪类或者伪元素，一般可以做以下四件...
复制链接

扫一扫