CSS @counter-style - 字首



@counter-style規則中,prefix描述符定義新增到標記表示開始的內容。如果未指定,則預設值為空字串" "

可能的值

  • <symbol> - 指定新增到標記表示開始的內容。這可以是<string>,<image>,<custom-ident>。

語法

prefix = <symbol>

CSS 字首 - 基本示例

以下示例演示了prefix描述符的用法。

<html>
<head>
<style>
   @counter-style Unit {
   system: alphabetic;
   symbols: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j";
   prefix: "Unit ";
   }
   .demo-prefix {
   list-style: Unit;
   font-size: 20px;
   padding-left: 15ch;
   color: red;
   }
</style>
</head>
<body>
<ul class="demo-prefix">
  <li>CSS-Borders</li>
  <li>CSS-Units</li>
  <li>CSS-Background</li>
  <li>CSS-Text</li>
  <li>CSS-Buttons</li>
  <li>CSS-Icons</li>
  <li>CSS-Selectors</li>
</ul>
</body>
</html>
廣告
© . All rights reserved.