有时候我们的页面里面有不少其他网站的名字，而且还要求网站名后面还要有网站的链接，类似这样：百度（http://www.baidu.com）。
这个时候如果网站多的话写起来就很麻烦了

<a href="http://www.baidu.com">百度</a>
a[href^=http]::after{content: '(' attr(href) ')';}

用这样一个伪类就能把刚刚上面写的  “百度”  变成  “百度(http://www.baidu.com)”；

现在在css3中使用"::after"和"::before"越来越多见，例如给链接添加ICON的效果。

伪元素::before和::after的更多相关文章

  1. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  2. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  3. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  4. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  5. Effective前端4：尽可能地使用伪元素

    伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...

  6. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  7. 伪元素::after和::before

    ::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...

  8. bootstrap之伪元素

    bootstrap之伪元素 参考地址:http://www.cnblogs.com/keyi/p/5943178.html http://www.runoob.com/css/css-pseudo-e ...

  9. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  10. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

随机推荐

  1. Xcode 常用快捷键及代码自动排版 二

    Xcode常用快捷键,网上找的总结一下,特别是格式化代码 隐藏xcode command+h退出xcode command+q关闭窗口 command+w关闭所有窗口 command+option+w ...

  2. iOS 面试基础题

    1.UIWindow和UIView和 CALayer 的联系和区别? 答:UIView是视图的基类,UIViewController是视图控制器的基类,UIResponder是表示一个可以在屏幕上响应 ...

  3. (转) Java程序员应该知道的10个调试技巧

    原地址:http://www.csdn.net/article/2012-09-03/2809495-java-debugging-tips-with-eclipse 调试可以帮助识别和解决应用程序缺 ...

  4. Tomcat学习笔记 - 错误日志 - Tomcat安装版安装后第二次启动后闪退（转）-- javac不是内部或外部命令 -- 配置java环境教程

    如果安装成功并且安装完成第一次启动是成功的,第二次就闪退的话,原因之一是没有配置java的环境.在网上找的配制方法有很多错误,测试javac命令时候会提示不是内部或外部命令,找到一个正确的教程.如下, ...

  5. (php)生成指定个数的随机红包

    <?php $total=20;//红包总金额 $num=10;// 分成10个红包,支持10人随机领取 $min=0.01;//每个人最少能收到0.01元 $redpack = new red ...

  6. C++之------虚函数

    今天又是周日,公司工业区这里九月份每个周日都会停电一天.停电停网,是没法活的.我们直接去老大家. 老大当爸爸了,回家一段时间了.听说孩子出生就不乖,很折腾他爸妈,这小家伙新生命二代.也愿小家伙早日康复 ...

  7. 推荐大家一本学习php模式的书

    对我来讲,写程序不是码代码,不想只是简单的将类拿来调用,然后功能实现了,可是以后要做一些扩展或者是修改就要对代码大刀阔斧. 在网站的开发过程中,使用一些框架,团队就可以在一定的程度上,分工合作.但是当 ...

  8. Yslow-23条规则编辑

    1. 减少HTTP请求次数 合并图片.CSS.JS,改进首次访问用户等待时间.   2. 使用CDN 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速   3. 避免空的 ...

  9. jQuery之事件

    (一).事件列表. 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单击时触发. 4.d ...

  10. yii安装配置

    Yii 的安装由如下两步组成: 从 yiiframework.com 下载 Yii 框架. 将 Yii 压缩包解压至一个 Web 可访问的目录. 提示: 安装在 Web 目录不是必须的,每个 Yii ...