如何在CSS中使用:after伪元素为某个标签添加内容或样式？

在CSS中，`:after`伪元素允许你在HTML元素的结尾处插入额外的内容，通常用于创建特殊的布局效果、图标替换、或者作为内容的补充。你可以像设置普通元素一样对它应用样式，包括字体、颜色、宽度、高度等。以下是基本的使用语法：

selector {
  content: "your-content"; /* 可以为文本，也可以是图片URL */
  display: block; /* 如果你想让伪元素占据空间，比如创建一个矩形 */
  position: relative; /* 这有助于定位伪元素 */
  /* 其他样式属性 */
}

/* 如果需要动态生成内容，可以使用变量或者表达式 */
selector::after {
  content: attr(data-text) || 'default text';
}

例如，如果你想给所有`.my-element`元素添加一个尾部的小箭头，你可以这样做：

.my-element::after {
  content: '\27A4'; /* 使用Unicode字符表示箭头 */
  color: #ccc;
  font-size: 1rem;
}