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

Question

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

Navigation

#1 by (2 votes)

0

Well I need to add an item to div when you have selected it, the actual image should look like this:

Itwouldbethisleftbankpointinthegreenitem.

Howwouldyoudothisincss,usingafterorbeforecanbedonewithcss3andsass.

MYHTML

<ion-rowmargin-top><ion-colcol-4class="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

asked by anonymous 24.08.2018 / 14:32

1 answer




    
        
            
                user contributions licensed under cc by-sa 3.0
                with attribution required.
            
        

        
            
                
                it_qna

score 2 · Accepted Answer

You can use the same technique for that answer and use a checkbox as the controller of which item is selected. The question of putting 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: '


                                    
                                                                                                                      24.08.2018 / 15:01