'How to place my CSS code representing icons just in front of the CSS class of the word "LIVE" and the Hours of the Timeline?

My FIRST button code to place just before the word "LIVE":

  position: relative;
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ed2121;
  background: rgba(229,97,95,.34);

My SECOND Code to place JUST IN FRONT OF THE TIME (12:25:47):

  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  margin-left: -10px;
  margin-right: 6px;

1 - I would like to place just in front of the "LIVE" Title (whose CSS class is: td-pulldown-size) as on the part circled in BLUE.

How then to make sure to place my first CSS code above corresponding to the icon is placed just before the Word "LIVE" ???

2 - And how to use my second CSS Code which represents just a Point of White color, so as to place it just in front of the CSS class et-timeline-date managing the time at the level of the part surrounded in GREEN ???

In other words, I would like to obtain the following result:

enter image description here

Thank you please help me.

css


Solution 1:[1]

first

<span class="td-pulldown-size">
 <div id="circle">
 </div>
 <font style="vertical-align: inherit;">
  <font style="vertical-align: inherit;>LIVE</font>
 </font>
</span>

.td-pulldown-size {
 display: flex;
 flex-direction: column;
}

.td-pulldown-size #circle {
 position: relative;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 border: 1px solid #ed2121;
 background: rgba(229,97,95,.34);
}

second

<div class="et-timeline-date">
 <div id="square">
 </div>
 <font style="vertical-align: inherit;">
  <font style="vertical-align: inherit;" 12:25:47 </font>
 </font>
</div>

.et-timeline-date {
 display: flex;
 flex-direction: column;
}

.et-timeline-date #square {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #fff;
 margin-left: -10px;
 margin-right: 6px;
}

give id to div and sort row.

I think this code is working... If not Im sorry:(

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions