CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Federico
Federico

Reputation: 1422

Place a div as an :after of another

The thing I would love to achieve is very simple to explain but I tried everyhting to achieve it.
I would love that ★ to appear right after the 06 using jQuery.

Thanks for any help.

The numbers are created by another function so the .num div looks empty in the original html code.

$(".like,.like-yes").insertAfter('.num');
.none{display:none}
body{font-family:Arial;font-size:5vw;}
.num{bottom:.5em;position:fixed;width:100%;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=num>01 02 03 04 05 06</div>
<div class=like>★</div><div class="like-yes none">★</div>

Upvotes: 0

Views: 56

Answers (2)

Bertrand
Bertrand

Reputation: 1976

Another solution and no need of javascript. It can be done with pure CSS. You can then style it with jquery (color, visibility...)

.none{display:none}
body{font-family:Arial;font-size:5vw;}
.num{bottom:.5em;position:fixed;width:100%;text-align:center;}
.num:after{content:'★'}
<div class=num>01 02 03 04 05 06</div>

Well, if the start needs to be clickable. Juste adapt code to suits your needed behaviour on click :

 $(".num").append('<a href="#">★</a>');
.none{display:none}
body{font-family:Arial;font-size:5vw;}
.num{bottom:.5em;position:fixed;width:100%;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=num>01 02 03 04 05 06</div>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106058

You should use append() and turn them into inline boxes

  • css update

$(".num").append($('.like,.like-yes'));
body {
  font-family: Arial;
  font-size: 5vw;
}

.like,
.like-yes {
  display: inline;
}

.none {
  display: none
}

.num {
  bottom: .5em;
  position: fixed;
  width: 100%;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=num>01 02 03 04 05 06</div>
<div class=like>★</div>
<div class="like-yes none">★</div>

  • or html update

$(".num").append($('.like,.like-yes'));
body {
  font-family: Arial;
  font-size: 5vw;
}
.none {
  display: none;
}

.num {
  bottom: .5em;
  position: fixed;
  width: 100%;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=num>01 02 03 04 05 06</div>
<span class=like>★</span>
<span class="like-yes none">★</span>

Upvotes: 1

Related Questions