css 中<select></select>的 before和after不显示

在CSS中，`<select>`元素通常会有一个下拉箭头作为默认的交互指示器，如果你想在它的前后添加自定义的内容，比如图标或文本，可以利用伪元素 `::before` 和 `::after` 来实现。

当你尝试使用 `::before` 或 `::after` 选择器来添加内容但实际效果不显示时，可能有以下几个原因：

1. **样式优先级问题**：检查你的CSS是否覆盖了浏览器的默认样式，如果默认样式设置了`display: none;`或者其他隐藏元素的方式，你需要明确设置`content`属性，并提高你的CSS规则优先级。

2. **元素定位问题**：确保伪元素的位置不会被`<select>`元素本身遮挡。你可以试试将它们设置在`position: relative;`的基础上，然后使用绝对位置(`top`, `right`, `bottom`, `left`)来调整位置。

3. **兼容性问题**：某些浏览器对CSS3的伪元素支持度可能不高，特别是老旧版本。可以检查浏览器兼容性表，针对特定浏览器提供备选方案。

4. **元素可见性**：确认`<select>`元素以及其伪元素的`visibility`或`opacity`属性设置正确，确保它们都是可见的。

下面是一个简单的例子，展示如何使用`::before`和`::after`添加元素：

select {
  position: relative;
}

.select-custom::before {
  content: '\f0d7'; /* 使用字体图标库，例如Font Awesome */
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 6px;
}

.select-custom::after {
  content: '选择';
  display: inline-block;
  position: absolute;
  top: -2px;
  right: 6px;
}