如何用position relative/absolute实现按钮内::after箭头的响应式适配

核心修改思路 #

利用已设置position: relative的.cn-btn-bn1作为定位容器，抛弃固定margin偏移的方案，改用绝对定位的right和top属性实现箭头的自适应定位，同时给按钮右侧预留足够空间，确保箭头始终处于内部。

具体修改步骤 #

1. 给按钮添加右侧内边距，避免文本与箭头重叠，同时保持左右视觉对称：
   给.cn-srp-only .cn-btn-bn1新增padding-right: 18px（与左侧text-indent值一致）。
2. 重构箭头的定位逻辑：
   • 移除.cn-srp-only .cn-btn-bn1::after和媒体查询中的margin属性
   • 设置right: 18px让箭头与右侧保持固定间距
   • 设置top: 50%配合transform: translateY(-50%)实现垂直居中，不受按钮高度变化影响
3. 移除移动端媒体查询中针对箭头的margin设置，新的定位逻辑已适配所有设备

修改后的完整CSS代码 #

.cn-btn-bn1 {
  display: block;
  position: relative;
  border: .91px solid #020B24;
  border-radius: 23px!important;
  background-color: #020B24;
  color: #FFF;
  line-height: normal;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s;
}

.cn-btn-bn1:hover {
  color: #020B24;
  background-color: #FFF;
}

.cn-btn-bn1--label {
  text-decoration: none;
  text-transform: capitalize;
  letter-spacing: .05em;
  font-family: 'InfinitiBrand-Regular';
}

.cn-srp-only .cn-btn-bn1 {
  padding: 7px 0;
  padding-right: 18px; /* 新增右侧内边距，预留箭头位置 */
  font-size: 16px;
  text-indent: 18px;
}

.cn-btn-bn1::after {
  content: "";
  display: block; /* 替换display:flex，无需弹性布局 */
  position: absolute;
  border-right: 1.5px solid #FFF;
  border-bottom: 1.5px solid #FFF;
  transform: rotate(-45deg) translateY(-50%); /* 新增translateY(-50%)实现垂直居中 */
  cursor: pointer;
  top: 50%; /* 垂直居中基准 */
  right: 18px; /* 与右侧固定间距 */
}

.cn-btn-bn1:hover::after {
  border-right: 1.5px solid #020B24;
  border-bottom: 1.5px solid #020B24;
}

.cn-srp-only .cn-btn-bn1::after {
  width: 11.5px;
  height: 11.5px;
  /* 移除原有margin设置 */
}

@media (max-width: 767px) {
  .cn-srp-only .cn-btn-bn1 {
    padding: 6px 0;
    padding-right: 18px; /* 保持右侧内边距 */
    font-size: 16px;
    text-indent: 18px;
  }
  .cn-srp-only .cn-btn-bn1::after {
    width: 11px;
    height: 11px;
    /* 移除原有margin设置 */
  }
}

效果说明 #

• 箭头始终固定在按钮内部右侧，与左右边缘保持18px的对称间距
• 垂直方向自动居中，无论按钮高度如何变化（比如不同的padding设置）
• 适配所有分辨率和设备，无需针对不同屏幕尺寸单独调整箭头位置

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