Can someone show me an example of using both ::after & ::before?

HTML & CSS
1

First, is this possible, what I’m trying to do?

Can someone show me an example of using both

#window::after {

and

#window::before {

What I’m thinking is this.

A base image, not transparent:

Then a transparent image infront of that

So, then this would be both after, and before the image infront of it.

150x150: #window::before {
There’s a transparent image under here if you right click

With another transparent image infront of that one.

This would be after the before image:

#window::after {

How would I fit the transparent image underneath the after image?
150x150: #window::before {

This would be the code I would be using

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#window {
  position: relative;
  width: 6.25em; /* do not use px units */
  height: 6.25em; /* do not use px units */
  padding: 0;
  margin: 1em auto;
  border-radius: 50%;
  background-image: url("http://via.placeholder.com/150x150"),url(https://i.imgur.com/rHw0nbg.png); 
  background-size: cover;
  font-family: 'courier new', monospace;
  /*changing the font size here changes the #window size */
  font-size: 1.5em;
  list-style: none;


}



#window::after {
  position:; I removed on purpose.
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://i.imgur.com/rHw0nbg.png);
  background-size: cover;
  content: '';
 }

#window li {
  position: absolute;
  transform: translate( -50%, -50%);
  font-weight: bold;
  color: #7afca0;
 }

#window li:nth-child(1) {
  top: 40%;
  left: 30%;
 }

#window li:nth-child(2) {
  top: 28%;
  left: 41%;
  color: #7ad6fc;
 }

#window li:nth-child(3) {
  top: 28%;
  left: 58%;
  color: #7ad6fc;
 }

#window li:nth-child(4) {
  top: 40%;
  left: 71.5%;
  color: #7ad6fc;
 }

#window li:nth-child(5) {
  top: 57.5%;
  left: 71.5%;
 }

#window li:nth-child(6) {
  top: 69%;
  left: 58%;
 }

#window li:nth-child(7) {
  top: 69%;
  left: 41%;
 }

#window li:nth-child(8) {
  top: 57.5%;
  left: 30%;
 }

#window li:nth-child(9) {
  top: 50%;
  left: 50%;
 }
</style>

</head>
<body>
 
 <ul id="window">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
 </ul>

</body>
</html>
2

I just did it.

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#window {
  position: relative;
  width: 6.25em; /* do not use px units */
  height: 6.25em; /* do not use px units */
  padding: 0;
  margin: 1em auto;
  border-radius: 50%;
  background-image: url("http://via.placeholder.com/150x150"),url(https://i.imgur.com/rHw0nbg.png); 
  background-size: cover;
  font-family: 'courier new', monospace;
  /*changing the font size here changes the #window size */
  font-size: 1.5em;
  list-style: none;


}





#window::before{
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://i.imgur.com/5u1Sgd3.png);
  background-size: cover;
  content: '';
border-radius: 50%;
 }
 


#window::after {
  position:; / Removed on purpose
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://i.imgur.com/rHw0nbg.png);
  background-size: cover;
  content: '';
 }

#window li {
  position: absolute;
  transform: translate( -50%, -50%);
  font-weight: bold;
  color: #7afca0;
 }

#window li:nth-child(1) {
  top: 40%;
  left: 30%;
 }

#window li:nth-child(2) {
  top: 28%;
  left: 41%;
  color: #7ad6fc;
 }

#window li:nth-child(3) {
  top: 28%;
  left: 58%;
  color: #7ad6fc;
 }

#window li:nth-child(4) {
  top: 40%;
  left: 71.5%;
  color: #7ad6fc;
 }

#window li:nth-child(5) {
  top: 57.5%;
  left: 71.5%;
 }

#window li:nth-child(6) {
  top: 69%;
  left: 58%;
 }

#window li:nth-child(7) {
  top: 69%;
  left: 41%;
 }

#window li:nth-child(8) {
  top: 57.5%;
  left: 30%;
 }

#window li:nth-child(9) {
  top: 50%;
  left: 50%;
 }
</style>

</head>
<body>
 
 <ul id="window">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
 </ul>

</body>
</html>
3

My only other question would be is this:

Should border radius be put somewhere else, or it belongs on here?
border-radius: 50%;

I think it belongs here cause it’s separate from everything else.

#window::before{
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(https://i.imgur.com/5u1Sgd3.png);
  background-size: cover;
  content: '';
border-radius: 50%;
 }
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.