如何使用::target-text为单选框标签文本左侧添加间距？

你当前的代码无法生效有两个核心原因：

1. ::target-text伪元素用途错误：这个伪元素仅用于匹配URL中通过:~:text=锚点指定的文本片段，只有当用户通过包含该锚点的链接打开页面时才会生效，它不是用来给普通静态文本添加间距的工具。
2. 选择器语法错误：div.radio > label ::target-text中的空格会让选择器匹配label后代元素的::target-text，但你要选中的是label内的文本节点，这种写法逻辑不成立。

正确的解决方法 #

要给单选框旁的「Boost Premium」文本左侧加间距，推荐两种简单可行的方案：

方案一：给单选框添加右侧外边距（无需修改HTML）

利用单选框与文本的 inline 布局特性，直接给input设置margin-right拉开间距：

div.radio > label input[type="radio"] {
    margin-right: 40px;
}

方案二：用span包裹文本，精准控制文本样式

如果需要更精准地单独控制文本样式，可以把文本放在<span>标签内：
修改后的HTML：

<div class="radio alpaca-control" name="package_plan" style="display: block;">
        <label>
            <input type="radio" name="package_plan" value="Boost Premium" checked="checked" class="">
            <span>Boost Premium</span>
        </label>
</div>

对应的CSS：

div.radio > label span {
    padding-left: 40px;
}

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