用CSS3为内容插入文字和图片

大家在一些门户网站或者博客日志列表中,一般会看到些文字后面跟着“…”表示有省略的文字内容。如下所示:
我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案......
在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,则表示不插入任何内容。

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP