zoukankan      html  css  js  c++  java
  • 使用CSS ::marker的自定义项目符号

    css ::marker这是一种实验技术,由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。


    ::marker元素代表一个列表项的标记框(<li>)。标记通常是一个项目符号或数字。

    使用:

    在css中display设置list-item值之后就会生成一个Markers标记以及控制标记位置和样式的几个属性,而且还定义了计数器(计数器是一种特殊的数值对象),而且该计数器通常用于生成标记(Markers)的默认内容。CSS伪元素::marker就是选择这些Markers标记。

    ul ::marker, 
    ol ::marker { 
        font-size: 200%; 
        color: #00b7a8; 
        font-family: "Comic Sans MS", cursive, sans-serif; 
    }

    只有一小部分CSS属性可以使用在::marker伪元素上:

    color
    text-combine-upright
    全部字体属性

    ::marker 伪元素的一些限制

    首先,能够响应 ::marker 的元素只能是一个 list item,譬如 ul 内部的 li,ol 内部的 li 都是 list item

    当然,也不是说我们如果想在其他元素上使用就没有办法,除了 list item,我们可以对任意设置了 display: list-item 的元素使用 ::marker 伪元素。

    其次,对于伪元素内的样式,不是任何样式属性都能使用,目前我们只能使用这些:

    all font properties -- 所以字体属性相关
    color -- 颜色值
    the content property -- content 内容,类似于 ::before 伪元素 的 content,用于填充序号内容
    text-combine-upright (en-US), unicode-bidi and direction properties -- 文档书写方向相关

    https://www.houdianzi.com/dglogo/ 东莞logo设计

    搭配 counter 一起使用

    可以观察到的是,::marker 伪元素与 ::before、::after 伪元素是非常类似的,它们都有一个 content 属性。

    在 content 里,其实是可以作用一些简单的字符串加法操作的。利用这个,我们可以配合 CSS 计数器 counter-reset 和 counter-increment 实现给 ::marker 元素添加序号的操作。

    对 counter-increment 还不算很了解的可以移步这里:MDN -- counter-increment

    假设我们有如下 html:

    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <h3>Itaque sequi eaque earum laboriosam.</h3>
    <p>Ratione culpa reprehenderit beatae quaerat voluptatibus, debitis iusto?</p>
    <h3>Laudantium sapiente commodi quidem excepturi!</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

    我们利用 ::marker 和 CSS 计数器 counter-increment 实现一个自动计数且 h3 前面带一个 emoji 表情的有序列表:

    body {
      counter-reset: h3;
    }
    
    h3 {
      counter-increment: h3;
      display: list-item;
    }
    
    h3::marker {
      display: list-item;
      content: "✔" counter(h3) " ";
      color: lightsalmon;
      font-weight: bold;
    }

    效果如下,实现了一个自动给 ::marker 元素添加序号的效果:

  • 相关阅读:
    3.25Java常量
    3.26Java逻辑运算符
    3.26Java关系运算符
    Java标识符
    3.27Java位运算符
    3.26Java运算符(operator)
    3.26Java字符型(char)变量、常量
    3.26Java布尔类型(boolean)变量、常量
    《算法导论》第9章 顺序统计学 (1)最小值和最大值
    《算法导论》第8章 线性时间排序 (1)计数排序
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/14973976.html
Copyright © 2011-2022 走看看