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

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

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

功能

功能说明

none

不生成任何内容

attr

插入标签属性值

url

使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)

string

插入字符串

实例展示:

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

.clearfix:before,



.clearfix:after {



       content:””;



       display:table;



}



.clearfix:after {



       clear:both;



       overflow:hidden;



}

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

假设我们有一个元素:

<a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a>

可以通过”: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;

}

效果

 

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

你可能感兴趣的:(BEFORE)