html - 右上角带有图标的文本

Question

我有两个 div，一个包含文本，另一个包含按钮，

这是我想要的:

1.

1. >

.stalin::after {
   content: '';
   background-image: url('https://thumb.ibb.co/e3WZQU/Ellipse_2.png');
   position: absolute;
 }
.trump:after{
   content: '';
   background-image: url('https://thumb.ibb.co/d4BOKp/Ellipse_3.png');
   position: absolute;
}
.marketing-primary{
   color:black;
   font-family: Roboto Regular;
   width: 373px;
   height: 92px;
   background-color:white ;
}

<div class="stalin">
  <p>Germany is dying slowly</p>
</div>
<div class="trump">
  <button type="button" class="marketing-primary">Dowiedz się wiecej</button>
</div>

我尝试了不同的方法，但没有任何效果？知道如何实现我想要的吗？

Answer 1

您要做的第一件事是为每个 :after 伪元素指定一个 width 和 height 以反射(reflect)圆圈的宽度和高度。这分别是 38px 和 48px。

您实际上需要position: relative，而不是position: absolute，并利用float 来定位:after 在它们各自的元素旁边。您还需要在主要的两个元素(.stalin 和 .trump)上使用 float: left。当您 float 元素时，您还需要将 clear: left 添加到 .trump 以将其放回下一行。

此外，请注意，您实际上希望在 .stalin p:after 上为 .stalin 的伪元素设置规则，而不是 .斯大林:之后。

从这里开始，只需利用margin 来控制:after 的偏移量，并添加一个负的z-index在 .trump:after 上将其定位在相应元素的后面。

这可以从以下方面看出:

.stalin {
  float: left;
}

.stalin p::after {
  content: '';
  background-image: url('https://thumb.ibb.co/e3WZQU/Ellipse_2.png');
  width: 38px;
  height: 38px;
  position: relative;
  float: right;
  margin-top: -20px;
  margin-left: 20px;
}

.trump {
  float: left;
  clear: left;
}

.trump:after {
  content: '';
  background-image: url('https://thumb.ibb.co/d4BOKp/Ellipse_3.png');
  width: 48px;
  height: 48px;
  position: relative;
  float: right;
  margin-left: -24px;
  margin-top: 60px;
  z-index: -1;
}

.marketing-primary {
  color: black;
  font-family: Roboto Regular;
  width: 373px;
  height: 92px;
  background-color: white;
}

<div class="stalin">
  <p>Germany is dying slowly</p>
</div>

<div class="trump">
  <button type="button" class="marketing-primary">Dowiedz się wiecej</button>
</div>