带有右上角图标的文本

Question

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

这是我拥有的东西：

1。

1. 

import urllib
from urllib.request import urlopen
import urllib.error
from bs4 import BeautifulSoup


def getbuses(code):
try:
    html = urlopen("https://abernecio.github.io/example_table.html") # Acede ao website
    soup = BeautifulSoup(html, 'html.parser')

    table = soup.find(id='smsBusResults') # Vai buscar a tabela com id #smsBusResults

    rows = table.find_all('tr') # Vai buscar as rows -tr- a tabela
    col = table.find_all("td")


    # for row in rows:
    #    tds = row.find_all('td')
    #    cols = [ele.text.strip() for ele in cols] # Remove a formatacao HTML
    #    cols = [ele.replace('\n', '') for ele in cols] # Remove os paragrafos
    #    cols = [ele.replace('\t', '') for ele in cols] # Remove uns espaços a mais, na fila dos autocarros

    cars = (col[0].text)
    time = (col[1].text)
    awaittime = (col[2].text)

    print("carros:")
    print(cars)

    print("\nhora:")
    print(time)

    print("\ntempo de espera:")
    print(awaittime)

H_regression <- apa_print(list(Step1 = model1, 
                               Step2 = model2, 
                               Step3 = model3), 
                          boot_samples = 0)

我尝试了其他方法，但没有用？知道如何实现我想要的吗？

Answer 1

.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>

Answer 2

您要做的第一件事是给每个: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>