如何下移CSS after伪元素使其与父元素文本对齐？

问题出在position: relative的行内伪元素垂直对齐逻辑上，margin-top无法直接调整它在文本流中的垂直位置——行内元素的垂直位置由基线、中线等行内布局规则决定，而非margin属性。下面是几种有效的解决方法：

方法1：使用vertical-align属性（推荐） #

这是处理行内元素垂直对齐的标准方案，直接设置伪元素的垂直对齐方式，匹配标题文本的中线或基线：

.mastermega h1 {
    font-family: 'MagicRetro';
    color: #353935;
    font-size: 36px;
    margin-left: 5px;
}

.mastermega h1:after {
    position: relative;
    content: "• • • •";
    font-size: 75px;
    color: rgba(246, 139, 187, 0.8);
    margin-left: 30px;
    vertical-align: middle; /* 对齐文本中线，可根据实际效果换成baseline、top等 */
}

如果字体的基线位置特殊，还可以用具体数值（比如vertical-align: -10px）微调。

方法2：用transform: translateY()偏移 #

利用相对定位元素可通过transform基于自身高度偏移的特性，精细调整伪元素的垂直位置：

.mastermega h1:after {
    position: relative;
    content: "• • • •";
    font-size: 75px;
    color: rgba(246, 139, 187, 0.8);
    margin-left: 30px;
    transform: translateY(-15%); /* 根据实际对齐效果调整百分比 */
}

方法3：统一行高 #

通过设置伪元素的行高匹配标题的行高，强制对齐：

.mastermega h1 {
    font-family: 'MagicRetro';
    color: #353935;
    font-size: 36px;
    margin-left: 5px;
    line-height: 1; /* 先固定标题的行高 */
}

.mastermega h1:after {
    position: relative;
    content: "• • • •";
    font-size: 75px;
    color: rgba(246, 139, 187, 0.8);
    margin-left: 30px;
    line-height: 36px; /* 匹配标题的font-size或行高 */
}

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