Html 引导下拉列表：：伪元素右对齐后

我目前正在使用我的

上的
btn block
。下拉切换

按钮将其设置为全宽

但是，我不喜欢：：after伪元素与按钮内容的距离是固定的

我对psuedo元素样式很不了解，但有没有办法让下拉箭头“浮动”，并从下拉列表的右侧对齐一个固定的宽度

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

下拉按钮

您可以使

：元素
后
位置：绝对并将其向右对齐，就像这样

.dropdown-toggle::after {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
}

顶部
和
页边距顶部
元素有助于垂直对齐箭头，无论下拉列表的高度如何。
您可以使
：在
元素之后
位置：绝对并将其向右对齐，就像这样

.dropdown-toggle::after {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
}

top
和
margin top
元素有助于垂直对齐箭头，无论下拉列表的高度如何