Use CSS the correct way

本篇主要记录下一些可以直接通过 css 而无需过多使用 js 的例子，同时也会记录一些 css 的技巧等等。

#☤ marker

这是一个伪元素，通常是在<li>或者<summary>上使用，用于修饰列表之前的标记样式，比如：

<ul>
    <li>item a</li>
    <li>item b</li>
    <li>item c</li>
</ul>

/*css*/
ul li {
    list-style-type: decimal-leading-zero;
}

ul li::marker {
    color:#777;
    font-variant-numeric: tabular-nums;
}

这个样式会修饰列表前的数字为灰色，且按照数字等宽，易于像表格那样对齐的形式显示。

#☤ outline

outline是元素的轮廓，悬浮在元素边框之上，元素和轮廓之间是透明的，也就是说如果 outline 和元素之间有了空隙时，颜色会继承父元素的背景色。

可以通过简单的例子看下：

<div class="content">
  <button class="btn btn-1">Click me</button>
  <button class="btn btn-2">Click me</button>
</div>

/* scss */

.btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-size: inherit;
  border: 0;
  line-height: 1;
  background: none;
  padding: .75em 1.5em;
}

.btn-1 {
  --clr: #386397;
  --outline: 2px solid var(--clr);
  color: var(--clr);
  outline: var(--outline);
  border: var(--outline);
  outline-offset: -2px;
  transition: outline-offset 200ms ease;
}

.btn-1:hover,
.btn-1:focus {
  outline: var(--outline);
  outline-offset: 2px;
}

.btn-2 {
  --clr: rgb(156, 17, 255);
  --outline: 2px solid rgb(156, 17, 255);
  color: var(--clr);
  outline: var(--outline);
  border: var(--outline);
  outline-offset: -2px;
  transition: outline-width 200ms ease, outline-offset 200ms ease;
}

.btn-2:hover,
.btn-2:focus {
  outline: var(--outline);
  outline-width: 8px;
  outline-offset: -8px;
}

主要关注.btn-1中的 border 和 outline-offset 的宽度，outline-offset 为负数时，外边框向内收缩，当为正数时，会向外扩张。搭配 transition 会形成一个简单的动态效果。

此外如果父元素带有了背景色之后，在变化过程中同样会展现出来，可以通过这个来实现通过修改背景色达按钮变色提示的效果。outline 的一些单独的选项有:

• outline-color
• outline-style

outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

• outline-width

/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> values */
outline-width: 1px;
outline-width: 0.1em;

#☤ text-decoration

我们可以文本进行一些样式的修改，比如常见的对段落进行划线。除了直线，也可以用波浪线。比如这段文字会被红色波浪线标记

实现很简单，如下：

<span style="text-decoration: underline wavy #e11d47 2px;">这段文字会被红色波浪线标记</span>

[Reference]: MDN CSS text-decroration

#☤ ListStyle

[Document]: MDN CSS List style type

#使用 after 伪元素实现小图标

.button::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 0.1rem;
  right: calc(-2.6rem - 2px);
  background-color: #111;
  border: 1px solid #111;
  transform: translateY(0.2rem) rotate(45deg);
  z-index: 2;
}

#counter-reset

一般我们可以通过 css 的相关属性来自动给标题添加一些信息。比如我们可以通过counter-reset和counter-increment来完成。

article {
  counter-reset: section;
}
section {
  counter-increment: section;
}
section h2:before {
  content: counter(section) '. ';
}

上述例子就会在每个二级标题前加上1.之类的。

下面这个示例是从 nextra 项目中找到的，会在每个三级标题前增加一个步骤号。

.steps-container {
  margin-left: 1rem;
  padding-left: 1.5rem;
  counter-reset: step;
  border-left: 1px solid;
  border-color: rgb(229 231 235/1);
  margin-bottom: 3rem;
}
.steps-container h3 {
  counter-increment: step;
}
.steps-container h3:before {
  content: counter(step);
  display: inline-block;
  position: absolute;
  margin-top: 3px;
  margin-left: -41px;
  width: 33px;
  height: 33px;
  text-align: center;
  text-indent: -1px;
  color: #999;
  border-radius: 100%;
  border: 4px solid #fff;
  background: #f3f3f3;
  line-height: 1.5rem;
  font-size: 1rem;
  font-weight: 400;
}

[Reference]: MDN counter-increment 文档