Position a div element after another using the :after pseudo-element

Question

Position a div element after another using the :after pseudo-element

My goal is simple to explain, but I have exhausted all my efforts trying to achieve it.
I am hoping for the ★ symbol to appear immediately after the number 06 using jQuery.

Any assistance would be greatly appreciated.

The numbers are generated by a separate function, so in the original HTML code, the .num div appears empty.

$(".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>

javascript jquery html css

Answer 1

Answer №1

You can utilize the append() method to convert them into inline elements

Update in CSS

$(".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>

Alternatively, modify in HTML

$(".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>

Answer 2

You can utilize the append() method to convert them into inline elements

Update in CSS

$(".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>

Alternatively, modify in HTML

$(".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>

Answer 3

Answer №2

Here is an alternative solution that eliminates the need for JavaScript by using only CSS. You can customize the styling with jQuery (such as color and 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>

If you want to make the starting point clickable, simply adjust the code to fit your desired behavior when clicked:

 $(".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>

Answer 4

Here is an alternative solution that eliminates the need for JavaScript by using only CSS. You can customize the styling with jQuery (such as color and 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>

If you want to make the starting point clickable, simply adjust the code to fit your desired behavior when clicked:

 $(".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>

Position a div element after another using the :after pseudo-element

Answer №1

Answer №2

Similar questions

Handling a WCF POST request with JQuery resulting in a 400 Bad Request HTTP Response

The function data() is coming back as null

CSS: Centralize content and use a div to hide images that overflow the container

Assign a value to a cookie using Node.js

Is there a way to conceal the second td element?

Is there a way to prevent a 'keyup' event from being triggered by a 'keydown' event?

Adjust the height value of each element to match the maximum height within a single line using only CSS

A guide on how to successfully send multiple arguments to a single Javascript method by utilizing thymeleaf onclick (th:onclick) functionality

Tips for resolving the warning message: "Utilize a callback function in the setState method to reference the

Exploring the differences between the meta viewport and font size

CSS Animations as an Alternative to jQuery's fadeIn(), fadeOut(), and fadeTo() Functions

Verifying if the autocomplete field is devoid of any entries

Determination of the winner in a tic tac toe game is not accurate using the if statement

How can you conceal the navigation and footer components on a 404 page using Next.js?

Utilizing React JS with Material-UI Autocomplete allows for seamlessly transferring the selected item from the renderInput to the InputProps of the textfield component

Restricting the type of user input in HTML forms

Implementing an object as a filter in an NG-repeat function

Utilizing Node.js to Retrieve Data from MySQL

Having trouble accurately obtaining the height of a DIV element using jQuery

Loop through every item in Typescript