伪元素::after和::before

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

::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的.支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after.
用法如上代码:
有兴趣的话可以copy下来在浏览器上看一下;
语法:
::after{content:"..."} 将你想要添加在元素后面的内容添加到content内;
::after{content:attr(data-descr)} 如下代码的第三个例子一样;
::after{content:url("...logo.png");} 引入媒体文件;
::after{content: counter(li);} 计数器: – 在列表时计算行数非常方便,这我们会在后面更补一篇文章;
::after{content: "";}  空 – 可以用于清除左右浮动元素,也能够用于使用背景图片(这是可以设置高和                           宽,甚至使用background-size。),这个我也会更补一篇文章;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css::before and css::aftertitle>
    <style>
        .exciting-text::after {
          content: "<- 让人兴兴兴奋!"; 
          color: green;
        }

        .boring-text::after {
           content:    "<- 无聊!";
           color:      red;
        }


        .ribbon {
          background-color: #5BC8F7;
        }

        .ribbon::after {
          content: "看这是橙色盒子";
          background-color: #FFBA10;
          border-color: black;
          border-style: dotted;
        }


        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;
        }
    style>
head>
<body>
    
    <p class="boring-text">这是些无聊的文字p>
    <p>这是不无聊也不有趣的文字p>
    <p class="exciting-text">在MDN上做贡献简单又轻松。
    按右上角的编辑按钮添加新示例或改进旧示例!p>
    <br>
    <br>
    <br>
    <br>

    <span class="ribbon">注意橙色盒子的位置。span>
    <br>
    <br>
    <br>
    <br>
    
    <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>
body>
html>

你可能感兴趣的:(CSS)