css中标志点怎么打

CSS中标志点的打法

在CSS中，标志点的使用非常广泛，比如列表、导航栏、分割线等等，下面介绍一下如何打出常用的标志点：

1. 列表标志

ul {
  list-style-type: disc; /* 实心圆点 */
  list-style-type: circle; /* 空心圆点 */
  list-style-type: square; /* 实心方块 */
  list-style-type: none; /* 取消标志 */
}

2. 行内标志

a::before {
  content: "●"; /* 实心圆点 */
  content: "〇"; /* 空心圆点 */
  content: "■"; /* 实心方块 */
}

3. 分割线标志

hr {
  border: none;
  border-top: 1px solid #ccc; /* 灰色实线 */
  border-top: 1px dashed #ccc; /* 灰色虚线 */
  border-top: 1px dotted #ccc; /* 灰色点线 */
}

4. 导航栏标志

nav ul {
  list-style-type: none;
  display: flex;
}

nav li {
  margin-right: 20px;
  position: relative;
}

nav li::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #ccc; /* 灰色实线 */
  background-color: #666; /* 灰色实线 */
  background-color: #f00; /* 红色实线 */
}

nav li:hover::before {
  width: 100%;
}