Understanding ::after pseudo selector

[OBXKH]

Hello,

i came accross this concept, and having a tough time grasping it

i googled, found some results (with examples) but only partialy get it

kindly point out the most basic concept of

::after

and how the property and value happen

how about this...

.btn-white::after {
    background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.4) scaleY(1.6);
}

also, explain

.btn::after {
    content: "";
}

why is the content empty?

i think these 2 concepts work together...

i know this is only the CSS

i ask for 2 - 3 examples, please (plus the code above)

this is fresh to me, so please go slow and simple

MOST APPRECIATED!!!

 

[VBService]

IMO this is a good explanation

7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input>). This effectively allows you to show something on a web page that might not be present in the HTML content. You shouldn’t use it for actual content because it’s not very accessible in that you can’t even select and copy text inserted on the page this way —  it’s just decorative content.

---

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

---

::before / ::after

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page 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.

 

[VBService]

The same issue, solution without ( ::before ::after) and with ( ::before ::after)
[ code on-line ]
#1

body {
  display: grid;
  height: 100vh;
  place-content: center;
  gap: 2rem;
}::

.message-box {
  --padding-left-right: 1rem;
  --padding-top-bottom: .5rem;
  --height-bar: 1.5rem;
  position: relative;
  width: 20rem;
  height: 10rem;
  border: 1px solid gray;
  border-radius: .5rem;
  overflow: hidden;
}

.box-1 .title-bar,
.box-1 .buttons-bar {
  position: absolute;
  width: calc(100% - (var(--padding-left-right) * 2));
  height: var(--height-bar);
  padding: var(--padding-top-bottom) var(--padding-left-right);
  display: flex;
  align-items: center;
}
.box-1 button {
  cursor: pointer;
}
.box-1 .title-bar {
  justify-content: space-between;
  top: 0;
  background-color: hsl(0 0% 0% /.8);
  cursor: default;
}
.box-1 .title-text {
  color: white;
  font: bold .95rem/1 system-ui, monospace;
}
.box-1 .title-bar button {
  font: bold 1.5rem/1 system-ui, monospace;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: white;
  transition: translate 150ms;
}
.box-1 .title-bar button:active {
  transform: translateY(1px);
}
.box-1 .content {
  padding: .5rem var(--padding-left-right);
  padding-top: calc(var(--height-bar) + var(--padding-top-bottom));
}
.box-1 .buttons-bar {
  justify-content: flex-end;
  gap: .5rem;
  bottom: 0;
  background-color: hsl(0 0% 50% /.8);
}
.box-1 .buttons-bar button {
  border-radius: .5rem;
}

<div class="message-box box-1">
  <div class="title-bar">
    <span class="title-text">Title [msbox-1]</span>
    <span><button id="msbox-1-close">&times;</button></span>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  </div>
  <div class="buttons-bar">
    <button id="msbox-1-ok">OK</button>
    <button id="msbox-1-cancel">Cancel</button>
  </div>
</div>

#2

body {
  display: grid;
  height: 100vh;
  place-content: center;
  gap: 2rem;
}

.message-box {
  --padding-left-right: 1rem;
  --padding-top-bottom: .5rem;
  --height-bar: 1.5rem;
  position: relative;
  width: 20rem;
  height: 10rem;
  border: 1px solid gray;
  border-radius: .5rem;
  overflow: hidden;
}

.box-2 button {
  position: absolute;
  cursor: pointer;
  border-radius: .5rem;
}
.box-2 .content {
  height: 100%;
  padding: .5rem var(--padding-left-right);
  padding-top: calc(var(--height-bar) + var(--padding-top-bottom));
}
.box-2 .content::before,
.box-2 .content::after {
  position: absolute;
  left: 0;
  width: calc(100% - (var(--padding-left-right) * 2));
  height: var(--height-bar);
  padding: var(--padding-top-bottom) var(--padding-left-right);
  display: flex;
  align-items: center;
}
.box-2 .content::before {
  content: attr(data-title-text);
  top: 0;
  background-color: hsl(0 0% 0% /.8);
  cursor: default;
  color: white;
  font: bold .95rem/1 system-ui, monospace;
}
.box-2 .content::after {
  content: "";
  bottom: 0;
  background-color: hsl(0 0% 50% /.8);
}
.box-2 #msbox-2-close {
  top: var(--padding-top-bottom);
  right: var(--padding-top-bottom);
  font: bold 1.5rem/1 system-ui, monospace;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: white;
  transition: translate 150ms;
}
.box-2 #msbox-2-close:active {
  transform: translateY(1px);
}
.box-2 #msbox-2-ok,
.box-2 #msbox-2-cancel {
  right: var(--padding-left-right);
  bottom: var(--padding-top-bottom);
}
.box-2 #msbox-2-ok {
  right: calc(var(--padding-left-right) * 5);
}

<div class="message-box box-2">
  <div class="content" data-title-text="Title [msbox-2]">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  </div>
  <button id="msbox-2-close">&times;</button>
  <button id="msbox-2-ok">OK</button>
  <button id="msbox-2-cancel">Cancel</button>
</div>

 

[OBXKH]

WOW!

many thanks! a bit outside my skills... for now

will definately come back when i am more confident

1 step at a time, correct?