专栏首页xingoo, 一个梦想做发明家的程序员【前端开发系列】—— 利用选择器添加内容

【前端开发系列】—— 利用选择器添加内容

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。

  也可以通过变量来实现自定义的标题

1     h1:before{
2             content:'第'counter(mycounter)'章';
3             color:red;
4             font-size:30px;
5         }
6         h1{
7             counter-increment:mycounter;
8         }

代码样例

<html>
<head>
    <style type="text/css">
        h1:before{
            content:'第'counter(mycounter)'章';
            color:red;
            font-size:30px;
        }
        h1{
            counter-increment:mycounter;
        }
        p:before{
            content:open-quote;
        }
        p:after{
            content:close-quote;
        }
        p{
            quotes:"("")";
        }
    </style>
</head>
<body>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
</body>
</html>

实现样例

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 左式堆

    零路径长:从X到一个不具有两个儿子的结点的最短路径的长。 性质: 任一结点的零路径长比他的诸儿子结点的零路径长的最小值多1 父节点属性值小于子节点属性值; 堆中...

    用户1154259
  • 20120918-LIST类定义《数据结构与算法分析》

    LIST类结构 1 template <typename Object> 2 class List 3 { 4 private: 5...

    用户1154259
  • 过滤器导图详解

    过滤器是web开发中常用的开发方式,比如一些典型的应用场景: 用户身份认证、对用户请求进行记录和审核、对用户发送的数据进行替换和过滤、转换图像格式、对响应内...

    用户1154259
  • Web前端温故知新-CSS基础

      定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

    用户7005037
  • Web前端温故知新-CSS基础

      定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

    Edison Zhou
  • React 学习:jsx 、变量定义、语法糖、三元表达式

    爱明依
  • SpringBoot 集成Freemarker

    更多更详细的请看 springboot的两大常用模版:thymeleaf和freemarker

    多凡
  • 人物|十年轮回

    TEG云端专业号
  • iOS开发——在CocoaPods发布个人第三方库

    podspec 文件是 Pod 库的描述文件,每个 Pod 库必须有且仅有一个这样的文件。文件名需要与我们将要创建的 Pod 库的名称一致,如我将创建的 Pod...

    Originalee
  • MyBatis官方文档-日志

    MyBatis 的内置日志工厂提供日志功能,内置日志工厂将日志交给以下其中一种工具作代理:

    Java架构师必看

扫码关注云+社区

领取腾讯云代金券