有时候我们的页面里面有不少其他网站的名字，而且还要求网站名后面还要有网站的链接，类似这样：百度（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. Javascript进阶篇——浏览器对象—History对象

    History 对象history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能.窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都有自己的hi ...

  2. android隐式intent使用场景解析

    Android 隐式intent相信大家都有用过,大部分场景我们用显式intent已经能满足我们的业务需求,隐式intent大部分都是用来启动系统自带的Activity或Service之类的组件.昨天 ...

  3. java合并list

    import java.util.ArrayList; import java.util.List;   import com.google.common.collect.Lists;   priva ...

  4. IOS开发之程序执行状态更改

    1 前言 上节我们介绍了程序执行的状态,从例子中我们可以发现处理这些状态更改的时候有明确的策略可以遵循,这次我们就来介绍一下. 2 详述 2.1 活动->不活动 使用applicationWil ...

  5. C# List<T>的详细用法

    所属命名空间:System.Collections.Generic List<T>类是 ArrayList 类的泛型等效类.该类使用大小可按需动态增加的数组实现 IList<T> ...

  6. xyiyy开始写博客了

    拖延症一直到现在才开始写博客... 希望写的博客对大家能有一些帮助,有不恰当或者不对的地方,还望大家指出. 以下为我的两个昵称:fraud xyiyy

  7. yii2 访问控制

    class SiteController extends Controller{ /** * @inheritdoc */ public function behaviors() { return [ ...

  8. jQuery插件教程

    http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html   非常不错的jQuery插件教程

  9. CentOS 安装redis2.8.13 提醒"libc.so.6: version `GLIBC_2.14' not found"系统的glibc版本太低

    以下在系统CentOS 6.3 x86_64上操作 1.试图运行程序,提示"libc.so.6: version `GLIBC_2.14' not found",原因是系统的gli ...

  10. python中print后面加逗号

    python中print输出一行,如果想多次输出的内容不换行,可以在print后面加逗号 例如 每个输出一行 phrase = "abcdefg" # Add your for l ...