Question

如何使用css＆＃39; :before和/或after将图像图标放在按钮的右上角？

Answer 1

默认情况下，

:before和:after会根据附加的元素设置静态位置。

查看此代码段。默认情况下，向:after添加内容会显示一些带有单词Button的文本inline。

将:after设置为display: block会将其视为一个块，因此它会低于此值。我已经在这个新元素的背景中添加了一个图像。

现在，如果我们将它的位置设置为absolute，并将其移动到右上方，它会向身体的右上角射出，因为我们没有相对定位按钮来固定我们的{{1元素。

最后一个按钮设置为absolute，因此position: relative;（绝对定位）将锚定到它，因为:after和:before处理它们的元素附属于父母。

:after

button {
  padding: 5px 10px;
}

button.text:after {
    content: "After";
}

button.img:after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15'><circle cx='7.5' cy='7.5' r='5' /></svg>");
  content: "";
  width: 15px;
  height: 15px;
  display: block;
}

button.top-right:after {
  position: absolute;
  top: 0;
  right: 0;
}

button.relative {
  position: relative;
}

button.cropper {
    overflow: hidden;
}

button.cropper:after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='15' /></svg>");
  width: 40px;
  height: 40px;
  right: -20px;
}

使用css在按钮的右上角放置一个图标

1 个答案: