当前位置：首页 > CSS

css制作符号

2026-04-01 09:52:14CSS

使用伪元素创建符号

通过 ::before 或 ::after 伪元素结合 content 属性生成符号。例如，为列表项添加自定义符号：

li::before {
  content: "★";
  color: gold;
  margin-right: 8px;
}

使用 Unicode 字符

直接在 HTML 或 CSS 中插入 Unicode 符号。例如显示箭头符号：

.arrow::after {
  content: "→";
}

利用 CSS 形状绘制符号

通过边框和旋转创建三角形、箭头等简单图形：

css制作符号

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid red;
}

使用 SVG 作为符号

内联 SVG 或背景图实现复杂符号：

.checkmark {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  width: 24px;
  height: 24px;
}

通过 box-shadow 组合图形

创建多个阴影构成复杂符号：

css制作符号

.plus-icon {
  width: 20px;
  height: 20px;
  position: relative;
}
.plus-icon::before,
.plus-icon::after {
  content: "";
  position: absolute;
  background: black;
}
.plus-icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
}
.plus-icon::after {
  width: 2px;
  height: 100%;
  left: 50%;
}

文本装饰符号

利用 text-decoration 和 text-shadow 创建下划线、波浪线等装饰：

.wavy-underline {
  text-decoration: underline wavy blue;
}

使用 CSS 图标库

通过引入图标字体库（如 Font Awesome）实现丰富符号：

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
.icon::before {
  font-family: 'Font Awesome';
  content: "\f054"; /* 右箭头 Unicode */
}