含短码页面元素定位：如何在表单右侧列下方添加文本与按钮

方案一：直接修改HTML（推荐） #

CSS伪元素无法生成可交互按钮（伪元素不是真实DOM节点，无法绑定事件或嵌套链接），因此最稳妥的方式是直接在目标容器后添加真实的文本和按钮元素：

<!-- 原有的成本估算器右侧容器 -->
<div class="calc-subtotal-wrapper">
  <!-- 原有表单内容 -->
</div>

<!-- 新增的免责文本和预约按钮 -->
<p class="calc-disclaimer">The above calculation is for simulation purposes only</p>
<div class="button-holder-sim">
  <a href="#" class="button button-appt">Request Appointment</a>
</div>

添加对应的CSS样式调整排版：

.calc-disclaimer {
  font-style: italic;
  font-size: 14px;
  margin: 10px 0; /* 调整文本与上下元素的间距 */
}

.button-holder-sim {
  margin-top: 10px; /* 调整按钮与文本的间距 */
}

方案二：无法修改HTML时用JS动态插入（适配插件生成的结构） #

如果插件限制无法直接编辑HTML，可通过JavaScript动态创建元素并插入到目标位置：

// 获取目标容器
const subtotalWrapper = document.querySelector('.calc-subtotal-wrapper');

// 创建免责文本元素
const disclaimerText = document.createElement('p');
disclaimerText.className = 'calc-disclaimer';
disclaimerText.textContent = 'The above calculation is for simulation purposes only';

// 创建按钮容器与按钮
const buttonHolder = document.createElement('div');
buttonHolder.className = 'button-holder-sim';
const apptButton = document.createElement('a');
apptButton.href = '#';
apptButton.className = 'button button-appt';
apptButton.textContent = 'Request Appointment';

// 组装按钮容器
buttonHolder.appendChild(apptButton);

// 将元素插入到目标容器后方
subtotalWrapper.after(disclaimerText, buttonHolder);

搭配同样的CSS样式即可实现排版需求：

.calc-disclaimer {
  font-style: italic;
  font-size: 14px;
  margin: 10px 0;
}

.button-holder-sim {
  margin-top: 10px;
}

为什么之前的方法无效？ #

• 单个DOM元素仅支持一个::before和一个::after伪元素，无法链式调用多个::after
• 伪元素的content属性仅支持文本、图片等非交互内容，无法嵌套<a>等可交互标签，即使写入也不会被解析为真实DOM节点，因此无法实现可点击按钮

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