Understanding ::after pseudo selector

Joined
Feb 15, 2021
Messages
84
Reaction score
0
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
Code:
::after

and how the property and value happen

how about this...

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

also, explain
Code:
.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!!!
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
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


multiplecanvases.jpg




::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.
 
Last edited:
Joined
Jul 4, 2023
Messages
341
Reaction score
39
The same issue, solution without ( ::before ::after) and with ( ::before ::after) ;)
[ code on-line ]
#1
CSS:
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;
}
HTML:
<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>
1700934941705.png


#2
CSS:
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);
}
HTML:
<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>
1700935060158.png
 
Joined
Feb 15, 2021
Messages
84
Reaction score
0
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?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,717
Messages
2,569,381
Members
44,700
Latest member
GusDuterra

Latest Threads

Top