• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • ::after

    版本:CSS3

    CSS伪元素::after用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

    语法:

    E::after{sRules}
    • ::after选择器向选定的元素之后插入内容,并且它生成包含放置在元素中的内容之后的生成内容的伪元素。
    • ::after选择器使用content 属性来指定要插入的内容。
    • ::after选择器在默认情况下,此伪元素是内联的,但是可以使用属性显示更改。
    • ::after选择器CSS3将伪对象选择符(Pseudo-ElementSelectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-ClassesSelectors),但以前的写法仍然有效。即:after可转化为::after
    • ::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。注: IE8仅支持:after

    CSS伪元素::after用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

    /* add an arrow after links */
    a::after {
      content: "→";
    }
    

    Firefox 3.5 note

    Firefox 3.5之前版本仅实现了CSS 2.0版本的语法:after.且不允许在position, float, list-style-*等属性中使用。Firefox 3.5开始没有了这项限制。

    浏览器支持

    IE9+以及新版浏览器都支持::after
    IE8以及早期IE版本不支持::after

    例子

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			p:after{
    				content:"-台词";
    				background-color:yellow;
    				color:red;
    				font-weight:bold;
    			}
    		</style>
    	</head>
    	<body>
    	<div>
    		<p>我是唐老鸭。</p>
    		<p>我住在duckburg。</p>
    	</div>
    	</body>
    </html>
    

    我是唐老鸭。

    我住在duckburg。

    简单用法

    让我们创建两个类:一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。

    <p class="boring-text">这是些无聊的文字</p>
    <p>这是不无聊也不有趣的文字</p>
    <p class="exciting-text">在mdn上做贡献简单又轻松。
    按右上角的编辑按钮添加新示例或改进旧示例!</p>
    
    
    .exciting-text::after {
      content: "<- 让人兴兴兴奋!"; 
      color: green;
    }
    
    .boring-text::after {
       content:    "<- 无聊!";
       color:      red;
    }
    

    这是些无聊的文字

    这是不无聊也不有趣的文字

    在mdn上做贡献简单又轻松。按右上角的编辑按钮添加新示例或改进旧示例!

    装饰用法

    我们几乎可以用想要的任何方法给content属性里的文字和图片的加上样式.

    <span class="ribbon">notice where the orange box is.</span>
    
    .ribbon::after {
      content: "look at this orange box.";
      border-style: dotted;
    }
    
    notice where the orange box is.

    提示用法

    接下来的示例展示了用::after伪元素,attr()CSS表达式和一个自定义数据属性data-descr创建一个纯CSS,词汇表提示工具。在单独页面看这个例子。

    <p>这是上面代码的实现<br />
      我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
      <span data-descr="small popups which also hide again">提示</span>。<br />
      把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
    </p>
    
    
    
    span[data-descr] {
      position: relative;
      text-decoration: underline;
      color: #00f;
      cursor: help;
    }
    
    span[data-descr]:hover::after {
      content: attr(data-descr);
      position: absolute;
      left: 0;
      top: 24px;
      min-width: 200px;
      border: 1px #aaaaaa solid;
      border-radius: 10px;
      background-color: #ffffcc;
      padding: 12px;
      color: #000000;
      font-size: 14px;
      z-index: 1;
    }
    

    这是上面代码的实现
    我们有一些文字有一些提示
    把鼠标放上去看看.

    上篇:::before

    下篇:::placeholder