如何用CSS实现伪元素内星星的固定位置旋转动画？

你的星星旋转偏移，主要是伪元素布局规则异常、旋转原点未明确匹配视觉中心导致的，调整方案如下：

调整后的CSS代码 #

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.top_bar_links_container>:first-child::before
{
    content: url('data:image/svg+xml,%20%20%20%20%20%20<svg%20xmlns%3D"http%3A//www.w3.org/2000/svg"%20viewBox%3D"0%2C0%2010%2C10">%20%20%20%20%20%20%20%20<polygon%20fill%3D"%23209fdf"%20points%3D"5%2C%200%205.8419%2C%202.96747%208.53553%2C%201.46447%207.03253%2C%204.1581%2010%2C%205%207.03253%2C%205.8419%208.53553%2C%208.53553%2C%207.03253%205%2C%2010%204.1581%2C%207.03253%201.46447%2C%208.53553%202.96747%2C%205.8419%200%2C%205%202.96747%2C%204.1581%201.46447%2C%201.46447%204.1581%2C%202.96747"%20/>%20%20%20%20%20%20</svg>%20%20%20%20');
    /* 替换特殊布局的table-caption为inline-block，保证正常布局规则 */
    display: inline-block;
    /* 让SVG在伪元素内居中显示 */
    background-position: center;
    background-repeat: no-repeat;
    /* 统一宽高为正方形，匹配SVG视觉尺寸，避免留白导致偏移 */
    width: 25px;
    height: 25px;
    padding-right: 5px;
    /* 强制指定旋转原点为元素中心，消除浏览器布局差异影响 */
    transform-origin: center center;
    animation: spin 1s linear infinite;
    /* 可选：和父元素文本垂直对齐，避免视觉错位 */
    vertical-align: middle;
}

关键调整说明 #

• 替换display: table-caption：table-caption的布局逻辑特殊，会导致元素位置、尺寸计算异常，inline-block能让伪元素作为行内块级元素正常参与布局。
• 明确旋转原点：虽然默认旋转原点是元素中心，但明确指定center center可以避免因浏览器差异或元素布局规则导致的原点偏移。
• 统一伪元素宽高：原代码中宽高不匹配，导致SVG在伪元素内位置偏移，调整为正方形后，SVG能自然居中。
• 垂直对齐优化：vertical-align: middle保证伪元素和父元素内的文本垂直居中，避免视觉上的错位。

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