如何在Elementor手风琴标题中实现时间右侧对齐（无法添加span）？

方法一：JavaScript + CSS（最可靠） #

这种方法能自动识别标题里的时间部分，动态添加包裹元素实现对齐，完美适配各种屏幕尺寸。

1. 添加自定义CSS

在Elementor的「自定义CSS」面板（全局或单个页面均可）插入以下代码：

/* 将手风琴标题设为Flex布局，实现两端对齐 */
.elementor-accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 可选：给内容和箭头留间距 */
  gap: 10px;
}

/* 时间部分的自定义样式（可按需修改） */
.accordion-event-time {
  font-size: 0.9em;
  color: #666;
}

2. 添加自定义JavaScript

在Elementor的「页面设置」→「自定义JS」（或全局自定义JS）中插入以下代码：

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有手风琴标题元素
  const titles = document.querySelectorAll('.elementor-accordion-title');
  
  titles.forEach(title => {
    const fullText = title.textContent.trim();
    // 👇 请根据你的实际时间格式修改正则表达式
    // 示例匹配YYYY-MM-DD，其他格式如"10月20日"可改为(\d{1,2}月\d{1,2}日)$
    const timeMatch = fullText.match(/(\d{4}-\d{2}-\d{2})$/);
    
    if (timeMatch) {
      const eventName = fullText.replace(timeMatch[0], '').trim();
      const timeText = timeMatch[0];
      // 动态生成带Span的标题内容
      title.innerHTML = `${eventName}<span class="accordion-event-time">${timeText}</span>`;
    }
  });
});

关键说明 #

• 正则表达式必须匹配你的实际时间格式，比如美式日期用(\d{1,2}/\d{1,2}/\d{4})$，英文月份用([A-Za-z]{3} \d{4})$。
• 如果只想作用于特定手风琴模块，给模块添加ID后，把CSS里的.elementor-accordion-title改成#你的模块ID .elementor-accordion-title，避免影响其他手风琴。
• 若想保留Elementor默认的下拉箭头，无需额外修改样式，Flex布局会自动把箭头放在最右侧；如需调整顺序，可给箭头加order: 2，时间Span加order:1。

方法二：纯CSS（仅适用于标题格式固定的场景） #

如果事件名长度相对统一，或时间是固定宽度内容，可以用纯CSS实现，但适配性不如JS方案：

.elementor-accordion-title {
  position: relative;
  padding-right: 80px; /* 预留时间的宽度 */
}

.elementor-accordion-title::after {
  content: attr(data-time); /* 需在Elementor标题的「自定义属性」里添加data-time="2024-10-01" */
  position: absolute;
  right: 20px; /* 调整与右侧的间距 */
  top: 50%;
  transform: translateY(-50%);
  /* 如需保留默认箭头，删除下面这行 */
  display: none;
}

这种方法需要给每个手风琴标题手动添加data-time属性，适合标题数量较少的场景。

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