大家在一些门户网站或者博客日志列表中,一般会看到些文字后面跟着“…”表示有省略的文字内容。如下所示:

我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案……

在CCJK此博客首页就是使用的“…”。在之前,我们是通过后端服务器程序截取或JS截取文字后加入“…”的,现在CSS3新增的content属性定义对应样式就可以实现啦。下面我们来看下具体用法:

content属性,以段落P标签内容为例:

如果我们想往其内部后追加“…”,可以这样定义样式:p:after{content:”…”;}

同样,我们也可以将…换成任何文字,如:p:after{content:”详情请点击”;}
此外,既然可以追加后置内容after,自然也提供了前置内容的追加方法before,如:p:before{content:”今日主题”;}
现在来假设一种情况,如果我们使用p:after{content:”详情请点击”;}已定义了所有的p内容后追加“详情请点击”,但是其中一个ID为note的p又不需要自动追加此后置内容,这时候我们可以为这个p另外定义——为content属性制定none值(注意:none值只能用于before和after这两种选择器)或normal(任何选择器都没问题)值即可:#note:after{content:none;}

上面说了这些content属性的值都为文字内容,那么能否通过此方法追加图片呢?CSS3果然是不会让我们失望。大家看语法——li:after{content:url(../images/hot.png);},就这么简单,把content的值改为url并加上正确的图片地址即可,然后通过after或before就把图片插入到其元素之后或之前了。这在网站中也是很实用的,一些列表中用到的hot、new小图标,都可以这么添加了。

由此可见, content属性主要是通过伪类选择器:before和:after来添加定义,content属性的值可以为任何内容,若content属性的值为none,则表示不插入任何内容。