Working with after and before css to add items on the screen

Asked

Viewed 204 times

0

Well I need to add an item to div when selected, the real image should look like this:

inserir a descrição da imagem aqui

It would be this bank dot on the left in the green item.

How to do this in css, using after or before can be done with css3 and Sass.

MY HTML

<ion-row margin-top>
 <ion-col col-4 class="plans-options active">
   <div class="detail-point"></div>
  <div>
   <span class="name-plan">{{namePlan}}</span> <br>
   <ion-row>
      <span class="currency">{{currency}}</span>
      <h1>{{price}}</h1>
   </ion-row>
   <span class="timeDuration">{{timeDuration}}</span>
   <div class="div-discount" *ngIf="discount">
     <span class="discount">{{discount}}</span>
   </div>
  </div>
 </ion-col>
 <ion-col col-4 class="plans-options">
   <div class="detail-point"></div>
  <div>
   <span class="name-plan">{{namePlan}}</span> <br>
   <ion-row>
      <span class="currency">{{currency}}</span>
      <h1>{{price}}</h1>
   </ion-row>
   <span class="timeDuration">{{timeDuration}}</span>
   <div class="div-discount" *ngIf="discount">
     <span class="discount">{{discount}}</span>
   </div>
  </div>
 </ion-col>
 <ion-col col-4 class="plans-options">
  <div class="detail-point"></div>
  <div>
   <span class="name-plan">{{namePlan}}</span> <br>
   <ion-row>
      <span class="currency">{{currency}}</span>
      <h1>{{price}}</h1>
   </ion-row>
   <span class="timeDuration">{{timeDuration}}</span>
   <div class="div-discount" *ngIf="discount">
     <span class="discount">{{discount}}</span>
   </div>
  </div>
 </ion-col>
</ion-row>

MY CSS

    .active {
  background-color: #1fb49c;
  color: white;
}
.plans-options {
  height: 95px;
  page-price {
    .name-plan {
      text-align: center;
      font-size: .7em;
    }

    ion-row {
      justify-content: center;
      margin-top: 5px;
      margin-bottom: -5px;
      .currency {
        font-size: .5em;
        margin-right: 2px;
        margin-top: 5px;
      }
      h1 {
        font-size: 1.4em;
        margin: 0 !important;
        font-weight: 600;
      }
    }
    .timeDuration {
      font-size: .5em;
    }
    .div-discount {
      margin-top: 5px;
      .discount {
        background-color: #afafaf;
        font-size: 0.5em;
        padding: 4px 10px 4px 10px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 15px;
        color: black;
        border-top-right-radius: 15px;
      }
    }
  }
}

.plans-options {
  &.active {
    .detail-point {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background-color: red;
    }
  }
}
css css3

  • Have you tried anything? It would be interesting to add the HTML that generates these elements to be playable in the answers.

  • @Andersoncarloswoss This addition may not understand the different tags a bit, but it produces for me the same question as a div. This code is mobile (Ionic 3)

  • I was able to solve in an not ideal way, which is by making a div and putting the color of the white embroidery, but it is not ideal because if I change the color of the background will be disconnected.

1 answer

2


You can use the same technique of that answer and use a checkbox as controller of which item is selected. The question of placing the ball in the upper corner, just set the parent element with relative position and the "ball" with absolute position of 2% of the top/left:

input[type=checkbox]{
  display: none
}

div {
  height: 150px;
  width: 150px;
}

div,
label {
  align-items: center;
  display: inline-flex;
  justify-content: center
}

label {
  font-size: 2em;
  background: #ccc;
  color: #333;
  width: 100%;
  height: 100%;
  position: relative
}

input[type=checkbox]:checked ~ label {
  background: #1fb49c;
  color: #fff
}

input[type=checkbox]:checked ~ label::before {
  display: block;
  position: absolute;
  top: 2%;
  left: 2%;
  content: ''
}
<div>
  <input id='item-001' type='checkbox'>
  <label for='item-001'>22.55</label>
</div>
<div>
  <input id='item-002' type='checkbox'>
  <label for='item-002'>212.20</label>
</div>
<div>
  <input id='item-003' type='checkbox'>
  <label for='item-003'>232.15</label>
</div>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.