如何通过CSS修改input输入框的placeholder占位符文本内容？

不存在可以直接替换::placeholder原生文本内容的CSS属性，你代码里写的content属性仅对::before、::after伪元素生效，无法作用于::placeholder伪元素来修改原始占位符文本。

原因说明 #

::placeholder伪元素的作用仅为修饰已存在的占位符文本样式，你能成功修改字体、颜色、内边距等样式就是这个原因。但占位符的原始文本内容是HTML标签上placeholder属性的DOM属性值，CSS没有修改DOM属性的能力，自然无法直接替换文本内容。

可行实现方案 #

方案1：直接修改HTML属性（最推荐，零兼容问题） #

直接修改input标签上的placeholder属性值即可，这是最规范的实现方式：

<input type="text" placeholder="你的自定义占位符内容" class="form-control DataTable--global-filter" value="">

方案2：JS修改属性（适合无法改动源码的场景，可靠性高） #

如果是第三方组件生成的DOM、你没法直接改HTML源码，可以用一行JS直接修改元素的placeholder属性，效果和改HTML完全一致：

// 选中目标输入框修改占位符
document.querySelector('.DataTable--global-filter').placeholder = '你的自定义占位符内容';

如果需要保留你之前写的占位符样式，原有的::placeholder样式代码完全可以保留，只需要删掉无效的content那一行即可。

方案3：纯CSS曲线模拟（不推荐，存在兼容问题） #

如果你完全不能改动HTML和JS，只能写CSS，可以靠「隐藏原生占位符+叠加伪元素文本」的方式模拟效果，注意该方案依赖:has()伪类，低版本浏览器不支持，且需要给input加一层父容器（input是可替换元素，多数浏览器不支持直接在input上生成::before/::after）：

/* 原有样式保留，将原生占位符文字设为透明隐藏 */
.DataTable--global-filter::placeholder {
  font-style: italic;
  font-size: 1em;
  color: transparent; /* 隐藏原始文本 */
  background: thistle;
  padding: 5px;
}
/* 父容器需要设置相对定位 */
.input-wrap {
  position: relative;
}
/* 用父容器的before伪元素生成自定义占位符 */
.input-wrap::before {
  content: "some other placeholder";
  position: absolute;
  left: 11px; /* 数值根据输入框内边距调整，对齐文本位置 */
  top: 50%;
  transform: translateY(-50%);
  color: mintcream;
  font-style: italic;
  font-size: 1em;
  pointer-events: none; /* 避免伪元素阻挡输入框点击聚焦 */
}
/* 输入框有内容时隐藏自定义占位符 */
.input-wrap:has(input:not(:placeholder-shown))::before {
  display: none;
}

对应的HTML结构需要给input套一层父容器：

<div class="input-wrap">
  <input type="text" placeholder="My placeholder" class="form-control DataTable--global-filter" value="">
</div>

内容的提问来源于stack exchange，提问作者kitten_world