Advance layout with pseudo classes - html

Question

So the question is...
Good css rules:
We have to set top/right or bottom/right or top/left or bottom/left for position: absolute.
instead of margin...
But do we have to set thouse positions for css ::after or ::before??
Pseudo-classes always goes after or before the element.
If, so.. how to reach expecting output like that:
$(function(){
$('span').on('click',function(){
$(this).parent().append(' extra text ');
})
})
.test__block{
width:200px;
margin:20px;
border:2px solid;
position:relative;
}
#blue{
border-color:blue;}
#red{
border-color:red}
span{
cursor:pointer;
font-weight:800}
#blue:after {
content: "+";
font-size:16px;
position: absolute;
margin-left: 0;
margin-top: -4px;
color:orange;
}
#red:after {
content: "+";
font-size:16px;
position: absolute;
left: 80px;
top: 30px;
color:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='blue' class='test__block'>Blue text with after element, position set to absolute and top/left, <span>add</span></div>
<div id='red' class='test__block'>Red text with after element, position set to absolute and margin, <span>add</span></div>
So, if you press add button you will see how '+' react with component.
Expecting effect is a blue container.
So what is a propper way to do that? It is only a example. The thing is i will not add text but text will have diferent dimension on each component, so adding different position to after element each time will be pointless? or maybe someday content will change and i will have to set thouse each time?
What if i will have to set thouse for 100? or 1 000 comonents?
Any clue?!

Answer 1

::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is.
::before is exactly the same only it inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:
You want the generated content to come before the element content,
positionally.
The ::after content is also "after" in source-order, so it will
position on top of ::before if stacked on top of each other naturally.
The other thing you concern about is the position of it. Try to make $(this).parent().append(' extra text '); to $(this).parent().append(' extra text extra text extra text extra text extra text');. The + will remain in the same position (according to blue one) and if you click add, it will still be the end of the text. Because when you set margin-left and margin-top values to blue one, you are setting the positions of + on span.
So when you're adding the text to that span element and click add, the text will expand and the + will always come ::AFTER the text with given positions, no matter what. Because of pseudo classes. The vertical and horizontal positions you set on ::after is the position of after the element.
An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.
Hope it helps :)

Answer 2

You can apply the same position declarations to a pseudo-element as you can to an element:
position: static
position: relative
position: absolute
position: fixed
position: sticky
On the whole, in order to establish complete control over your positioning of the pseudo-element I would suggest it is good practice to apply position: relative to the parent element (if it doesn't already have a non-static position declaration applied to it) and then apply position: absolute and co-ordinates to the child pseudo-element.