将第三个元素添加到包含：after和：before的div中

Question

我想要一个按钮，我想要这样：

所以我开始编码：

＆＃13;

＆＃13;

.IconBasic {
    width: 30px;
    height: 30px;
    border: 1px solid #000000;
    border-radius: 50%;
    cursor: pointer;
    background-color: white;
}

.IconBasic:before, .IconBasic:after {
    content: "";
    position: absolute;
    background: #000000;
}

.IconBasic:before {
    transform: translate(-210%, -50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

.IconBasic:after {
    transform: translate(110%, -50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

＆＃13;

<button class="IconBasic"></button>

＆＃13;

＆＃13;

＆＃13;

由于某些原因，我不想添加更多的HTML;我想只用css这个。有谁知道这可能吗？

编辑：我知道Can I have multiple :before pseudo-elements for the same element?，但事实并非如此。我知道你不能添加更多的伪元素，但还有其他方法，这个问题是关于这个问题。