css：before和after中的content属性

css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容

就像这样：

.email-address:before { content: "Email address: "; }

我们可以书写的html代码：

<ul><li class="email-address">chriscoyier@gmail.com</li> </ul>

输出的内容是这样的：

• Email address: chriscoyier@gmail.com

让我们细致的看看这个属性：

使用特殊的字符：

我们可以借鉴表格来判断特殊的ASCII码对应的字符，表格点击我！就像表格中展示的一样，版权的图标© 是 © 所以ASCII 是169.

然后点击表格进行css以及js中使用的字符数字之间的转换。

简单但是很实用，下面是一些简单的字符：

\00A9 - 版权
\2192 - 右箭头
\2190 - 左箭头

使用属性

你可以在content中使用目标元素的属性，例如一个链接可能如下：

<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>

你可以获取上面链接的title属性：

a:before {content: attr(title) ": ";
}

我们可以使用目标元素的任何属性，只要只用了形式是 attr(name-of-attribute)的写法.

#Example Trick: CSS3 tooltips

a {color: #900;text-decoration: none;
}a:hover {color: red;position: relative;
}a[title]:hover:after {content: attr(title);padding: 4px 8px;color: #333;position: absolute;left: 0; top: 100%;white-space: nowrap; z-index: 20px;-moz-border-radius: 5px; -webkit-border-radius: 5px;  border-radius: 5px;  -moz-box-shadow: 0px 0px 4px #222;  -webkit-box-shadow: 0px 0px 4px #222;  box-shadow: 0px 0px 4px #222;  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

因为所有的元素都有title属性，所以可以使用data-自定义属性这样子来对于制定特性的元素设置样式。

需要考虑的点：

Firebug不能检测目标元素。在 WebKit 的浏览器中可以指检测到元素，但是,不能展现目标元素的健对值。
不能用于变形和动画属性。

浏览器支持

所有的主流浏览器(Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, and Internet Explorer 8+) (查看表格) 支持 :after/:before。

转载于:https://www.cnblogs.com/RachelChen/p/5535339.html