css制作标点

使用伪元素添加标点

通过 ::before 或 ::after 伪元素在元素前后插入标点符号。例如为段落首行添加引号：

p::before {
  content: "“";
}
p::after {
  content: "”";
}

调整标点悬挂效果

使用 text-indent 和负边距实现标点悬挂排版：

.hanging-punctuation {
  text-indent: -0.5em;
  padding-left: 0.5em;
}

标点压缩处理

通过 font-feature-settings 启用OpenType的标点压缩功能：

.compressed-punctuation {
  font-feature-settings: "halt" 1;
}

特殊标点样式控制

针对特定标点单独设置样式：

/* 中文书名号特殊样式 */
.content::after {
  content: "》";
  font-weight: bold;
  color: #c00;
}

标点避头尾处理

使用CSS文本模块的避头尾规则：

.avoid-break {
  line-break: strict;
  word-break: keep-all;
}

标点对齐优化

针对不同语言调整标点对齐方式：

/* 中文标点居中 */
.chinese-punctuation {
  text-align: justify;
  text-justify: inter-ideograph;
}

标点颜色强调

通过颜色突出特定标点：

.highlight {
  color: red;
}
q::before, q::after {
  content: '"';
  color: #999;
}