Текст с иконкой вверху справа

Question

У меня есть два элемента div, один из которых содержит текст, а другой содержит кнопку,

Вот что мне нужно:

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, которые отражают ширину и высоту окружностей.Это 38px и 48px соответственно.

Вместо position: absolute вы на самом деле захотите position: relative и использовать float, чтобы расположить :after рядом с их соответствующимиэлементы.Вам также понадобится float: left на двух основных элементах (.stalin и .trump).Когда вы перемещаете элементы, вам также нужно добавить clear: left к .trump, чтобы вернуть его на следующую строку.

Также обратите внимание, что вы на самом деле захотите установить свои правиладля .stalin псевдоэлемента на .stalin p:after, а не .stalin:after.

Отсюда просто нужно использовать 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>

Answer 2

.marketing-primary{
  width:300px;
  height:100px;
  background:#fff;
  border:none;
  color:#000;
  outline:none;
  box-shadow:0 0 5px rgba(0,0,0,.3);
  font-family: Roboto Regular;
}

.marketing-primary:after{
  content:'';
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid green;
  position:absolute;
  right:-10px;
  bottom:-50px;
  z-index:-1;
}

.stalin p{
  font-family: Roboto Regular;
  position:relative;
  display:table;
}

.stalin p:after{
  content:'';
  position:absolute;
  width:15px;
  height:15px;
  border-radius:50%;
  border:1px solid blue;
  top:-5px;
  right:-20px;
}

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

<span style="position:relative;">
<button class="marketing-primary">Dowiedz się wiecej</button>
</span>