如何让按钮中float:right的:after伪元素与文本垂直对齐？

我编写了如下代码：

.my_button  {
    background-color:white;
    width:100%;
    text-align:justify;
    border-style:solid;
}
.my_button:after    {
    content:'X';
    float:right;
    font-size:30px;
}

<button class="my_button">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</button>

目前大号的X显示在文本下方，我希望X垂直对齐在按钮右侧，文本居左，尝试过margin、padding、width属性均无效，请问该如何实现？

问题根源在于float:right会让伪元素脱离正常文档流，结合多行文本的排版特性，导致X被挤到文本下方。以下两种方法可以解决需求：

方法1：Flex布局（推荐） #

利用flex布局实现文本居左、X固定右侧且垂直居中，适配性更强：

.my_button {
    background-color: white;
    width: 100%;
    border-style: solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: left; /* 替换原justify，满足文本居左需求 */
}

.my_button:after {
    content: 'X';
    font-size: 30px;
    flex-shrink: 0; /* 固定X宽度，不随文本压缩 */
}

方法2：相对定位+绝对定位 #

如果偏好传统定位方案，可通过相对定位给伪元素提供参考：

.my_button {
    background-color: white;
    width: 100%;
    border-style: solid;
    text-align: left;
    position: relative;
    padding-right: 35px; /* 给X预留空间，避免遮挡文本 */
}

.my_button:after {
    content: 'X';
    font-size: 30px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%); /* 向上偏移自身一半高度，实现垂直居中 */
}

关键说明 #

• 两种方法都能实现X垂直居中于按钮右侧、文本居左的效果
• Flex布局更符合现代CSS规范，无需手动计算间距，适配多场景
• 需将原text-align:justify改为text-align:left，匹配文本居左的需求

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