css - 使用::after 时的边界半径问题

Question

我有一个带圆 Angular 的黄色按钮，里面有一些文字，文字右边有一张下载图片。

我的按钮是这样设置的:

<a class="yellow-button" href="#">Some text</a>

我有这样设置的样式:

.yellow-button {
  border-radius: 0.375rem;
  background-color: yellow;
  padding: 13px 30px;
  margin-top: 5px;
  box-sizing: border-box;
  font-size: 0.875rem;

  &:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    background: url(../img/download-icon.png) no-repeat;
    background-size: 16px 17px;
    margin-left: 5px;
    margin-right: 20px;
    height: 18px;
    width: 16px;
  }
}

我遇到了一个问题，按钮右侧的两个 Angular 都没有圆 Angular ，但左侧 Angular 是圆 Angular 。

Answer 1

这里真正的问题是你放了一个 inline-block链接中的元素(默认为 display: inline)。这并不总是不正确的，但它肯定会让您的布局变得更加棘手(即默认情况下您的 <a> 不会按您的意愿行事:永远不会应用边距)。

给你的按钮display: inline-block问题消失了:

.button {
  display: inline-block;
  border-radius: 0.375rem;
  background-color: red;
  color: white;
  margin-top: 5px;
  padding: 13px 30px;
}

.button:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  background: blue;
  margin-left: 5px;
  margin-right: 20px;
  height: 18px;
  width: 16px;
}

<a class="button" href="#">Some text</a>