Using ::after css not working below

Question

There must be something that I am missing, but I am trying to use ::after in my css, but unfortunately it isn't working.

My css code is below.

.test {
  height: 40px;
  width: 40px;
  background: #444;
}
.test::after {
  position: relative;
  top: 15px;
  height: 240px;
  width: 240px;
  background: red;
}

<div class="test"></div>

after requires always content:'' ... and something to give dimensions like display or absolute/fixed position — DaniP
– DaniP, Commented Oct 4, 2016 at 16:46
@PeeHaa you are correct, but i didn't know that it always requires content: '' and I'm sure others don't either, but you are correct, it is a bad question and is sure to be downvoted — user6002037
– user6002037, Commented Oct 4, 2016 at 16:49
@DaniP does it also always need to be set to position: absolute? — user6002037
– user6002037, Commented Oct 4, 2016 at 16:50
NO .. as I mention you need any property that gives the element box behavior like display. — DaniP
– DaniP, Commented Oct 4, 2016 at 16:51

user3455726 · Accepted Answer · 2016-10-04 17:05:02Z

2

You just need add content: '' to pseudo-class :after or :before and set the position to absolute.

.test {
  height: 40px;
  width: 40px;
  background: #444;
  position:relative;
}
.test:after {
  position: absolute;
  top: 15px;
  height: 240px;
  width: 240px;
  background: red;
  content: ''
}

<div class="test"></div>

but if you want you can use it without absolute, just add some float to it, because pseudo-classes generates like inside the parent node.

.test {
  height: 40px;
  width: 40px;
  background: #444;
  position:relative;
}
.test:after {
  content: '';
  background: red;
  width: 10px;
  height: 10px;
  float: right;
  
}

<div class="test"></div>

But if you need use it like icon, inside the block better way use it with absolute.

edited Oct 4, 2016 at 17:05

answered Oct 4, 2016 at 16:47

user3455726

1261 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6002037 Over a year ago

thanks! does position always need to be set at absolute?

Collectives™ on Stack Overflow

Using ::after css not working below

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related