如何将元素绝对定位在标题第一行末尾？

核心限制说明 #

你之前尝试的::first-line::after方案不可行，原因有两点：

1. CSS规范不允许伪元素嵌套，::first-line无法搭配::after使用；
2. ::before/::after仅支持生成文字、图片这类内容，无法插入复杂HTML结构。

下面提供两种可落地的实现方案：

方案一：纯CSS行内布局（适配简单场景） #

通过将shine容器设置为行内块元素，让它跟随标题文本自然流动，自动停在第一行末尾。

代码调整 #

1. JSX结构（把shine容器作为标题的直接子元素）：

<h1 className={css.title}>
  你的标题文本内容
  <div className={css.container}>
    <div className={css.shine1}></div>
    <div className={css.shine2}></div>
    <div className={css.shine3}></div>
  </div>
</h1>

2. SCSS样式修改：

.title {
  position: relative;
  /* 保留你原有的第一行背景样式 */
  &::first-line {
    background-color: red;
  }
}

.container {
  display: inline-block;
  vertical-align: middle; /* 和标题文本基线对齐 */
  margin-left: 8px; /* 可选：和文本保持间距 */
  position: relative;
  width: 32px; /* 对应shine元素的最大宽度 */
  height: 20px; /* 对应shine元素的高度范围 */

  div {
    position: absolute;
    height: 5px;
    border-radius: 5px;
    background-color: $mainColor;
    transform-origin: bottom left;
  }
  .shine1 {
    width: 26px;
    transform: rotate(-95deg) translate(20px, 5px);
  }
  .shine2 {
    width: 32px;
    transform: rotate(-45deg) translate(20px);
  }
  .shine3 {
    width: 26px;
    transform: rotate(0deg) translate(15px);
  }
}

方案二：JS辅助定位（适配复杂换行场景） #

如果需要强制shine元素始终停在第一行末尾（即使标题第一行刚好填满），可以通过JS计算第一行的位置来精准定位。

代码调整 #

1. JSX结构（给标题文本加span包裹，给shine容器加ref）：

import { useEffect, useRef } from 'react';

// 组件内部
const shineRef = useRef(null);

useEffect(() => {
  const titleText = document.querySelector('.titleText');
  const shineEl = shineRef.current;
  if (!titleText || !shineEl) return;

  // 计算并设置初始位置
  const setShinePosition = () => {
    const firstLineRect = titleText.getClientRects()[0];
    if (firstLineRect) {
      shineEl.style.left = `${firstLineRect.width - shineEl.offsetWidth}px`;
      shineEl.style.top = `${firstLineRect.top - titleText.offsetTop}px`;
    }
  };
  setShinePosition();

  // 窗口 resize 时重新计算
  window.addEventListener('resize', setShinePosition);
  return () => window.removeEventListener('resize', setShinePosition);
}, []);

return (
  <h1 className={css.title}>
    <span className={css.titleText}>你的标题文本内容</span>
    <div className={css.container} ref={shineRef}>
      <div className={css.shine1}></div>
      <div className={css.shine2}></div>
      <div className={css.shine3}></div>
    </div>
  </h1>
);

2. SCSS样式修改：

.title {
  position: relative;
  &::first-line {
    background-color: red;
  }
}

.titleText {
  /* 确保文本能正常换行 */
  overflow-wrap: break-word;
}

.container {
  position: absolute;
  width: 32px;
  height: 20px;
  /* 其余shine子元素样式保持不变 */
}

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