Using ::before, and ::after

HTML & CSS
1

Is this correct on how it would be written?

I thought before and after have to be next to each other like this.

.wrapa::before
.wrapa::after

Code:

  <div></div>

.wrapa ::before,
.wrapa ::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.wrapa ::after {
  left: 399px;
}
2

Which of these are you using??

3

Currently it is set up this way:

Code:

  <div></div>

.wrapa ::before,
.wrapa ::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.wrapa ::after {
  left: 399px;
}
4

before and after are separate properties so there needs to be a comma between the two

.wrapa::before,.wrapa::after {

Furthermore there should not be a space between the actual class and the pseudo class, so:

.wrapa::before, .wrapa::after {

Is the proper way to do so

5

I just did that here, but now the lines don’t appear after it is clicked:

.wrapa::before,
.wrapa::after

Compared to this:
Where the lines appear after it is clicked.

.wrapa ::before,
.wrapa ::after

6

Which lines are you reffering to?

7

These:
image

8

Actually it will work with space before the pseudos, but all instances of your pseudo selectors must be the same.

.wrapa ::before,
.wrapa ::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 44px;
  background: red;
}

.wrapa ::after {
  left: 399px;
}

or…

.wrapa::before,
.wrapa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 44px;
  background: red;
}

.wrapa::after {
  left: 399px;
}

I prefer no space

1 Like
9

That’s because you have just restyled the same elements to have a background and no borders!!

You were using before and after to apply the lines but now you change them to be a different size and just have backgrounds only. You can’t change the elements properties and then say where has the other one gone :slight_smile: (there is no other one it is the same one)

You could add some borders to your new properties.

e.g.

.wrapa.active::before,
.wrapa.active::after {
  content: "";
  position: absolute;
  top: 0;
  width: 198px;
  height: 44px;
}

.wrapa.active::before {
  left: 0;
  background-color: #00ffff;
border-right:3px solid red;
}

.wrapa.active::after {
  right: 0;
  left:auto;
  background-color: #ff00ff;
  border-left:3px solid red;
}

Remember though that your original declarations still cascade into these styles so if there are conflicts they need to be resolved (which is why I added the left:auto to over-ride a previous setting).

1 Like
10

Lines disappear after it is clicked with no space:

11

That’s not right. I see the lines. Have a look at @PaulOB’s comment

12

This is the wrong syntax then, and improper coding then if it is set like this?

There can never be an empty space?

i.e., empty spaces are not allowed?

.wrapa ::before,
.wrapa ::after {
13

look at what @Ray.H tells you in post #8

14

When you have a space then that means a descendant selector. Your code will actually work using a descendant selector but it is actually applying another set of before and after to the empty nested div. It does not replace the original lines.

3 Likes
15

< offtopic >
Nice. Didn’t know that
</ offtopic >

16

Simple example to show differences.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test div {
	display:inline-block;
	padding:5px;
	border:1px solid red;
}
.test:before {
	content:"before nested div... ";
}
.test:after {
	content:" ...after nested div";
}

/* with descendant selector */
.test :before {
	content:"inside nested div using before content ... ";
	color:red;
}
.test :after {
	content:" ...inside nested div but after content";
	color:blue;
}
</style>
</head>

<body>
<div class="test">
  <div>Nested div</div>
</div>
</body>
</html>
3 Likes
17

And the proper way to write that would have been…

.test div:before

Correct?

3 Likes
18

Nice example @PaulOB. Thanks a lot :+1:

1 Like
19

So, then it could be written like this instead.

.wrapa div:before,
.wrapa div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.wrapa div:after {
  left: 399px;
}
20

Now I see what was going on. There was an empty div in the html that created the descendant selector.


  </svg>
  <div></div>
         
        </div>

asasass, Now I see that you were using the .wrap pseudos for the left and right background colors. Then you used pseudos on the empty div for your lines.

You could have just used a gradient bg image on .wrap and then the .wrap pseudos could have been your lines. That would have eliminated the empty div and the confusion of pseudo descendant selectors.