CODEWITHSUNDEEP
css
user6002037
user6002037

Reputation:

Using ::after css not working below

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>

Upvotes: 0

Views: 45

Answers (1)

user3455726
user3455726

Reputation: 126

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.

Upvotes: 2

Related Questions