Question

我是 CSS 新手，正在尝试研究如何将“x”（或其他指示符）添加到活动菜单项中，如下所示：

http://www.evoltaste.com/

当您选择“工作”下的菜单项时，所选链接变为粗体并添加“x”前缀。我理解粗体，但“x”是如何添加的？我查看了 CSS 样式表，但无法隔离类或控制该元素的任何内容。

Answer 1

您可以在 CSS 中应用 ::before 和 ::after 伪元素。

在这种情况下，您可以使用以下内容：

.my-link::before {
  content: 'X';
  display: inline-block;
  width: 24px;
  text-align: center;
}

工作示例：

.my-link::before {
  content: '';
  display: inline-block;
  width: 24px;
  font-weight: bold;
  text-align: center;
}

.my-link:hover::before {
  content: 'X';
}

<a href="" class="my-link">My Link - hover over me</a>

将“x”元素添加到活动菜单链接

1 个答案: