zoukankan      html  css  js  c++  java
  • CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在字符串两边加上括号。

    1.在多个标题前加上连续编号

    <style type="text/css">

     h1:before{

       content:counter(mycounter);  

     }

    </style>

    2.在项目编号中追加文字

    h1:before{

      content:'第'counter(mycounter)'章';

    }

    3.指定编号的样式

    例如:使得编号后面带一个"."文字,编号颜色为蓝色,字体大小为42像素。

    h1:before{

       content:counter(mycounter)'.';

       color:blue;

       font-size:42px;

    }

    4.指定编号的种类

    h1:before{

      content:counter(mycounter,upper-alpha)'.';

      color:blue;

      font-size:42px;

    }

    5.在字符串两边添加嵌套文字符号

    可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。

    h1:before{

      content:open-quote;

    }

    h1:after{

     content:close-quote;

    }

    h1{

     quotes:"(" ")";

    }

  • 相关阅读:
    js的浅拷贝与深拷贝
    用Nodejs连接MySQL(原文链接)
    HTML5交互性图表库
    GitHub Desktop离线安装包
    docker--Dockerfile--sonarqube
    docker --Nexus仓库
    docker --Dockerfile--一些语法
    zookeeper 四字命令
    docker --swarm创建一个集群
    docker --swarm启动2375端口监听
  • 原文地址:https://www.cnblogs.com/wyaocn/p/5837043.html
Copyright © 2011-2022 走看看