CODEWITHSUNDEEP
css
user10874121
user10874121

Reputation:

How to do something to appear before or after in a HTML division tag?

Actually, I have a div tag and I run code like below:

<div class="navbar-text">someText</div>

...

.navbar-text:before {
  display: block;
  height: 20px;
  width: 20px;
  background: #f00;
}

But I cannot see the red square. How can I make it appear?

Upvotes: 0

Views: 51

Answers (2)

Mishel Tanvir Habib
Mishel Tanvir Habib

Reputation: 1142

::before or :: after will not work without a content property. It may be empty but it has to be there.

.navbar-text:before {
  content: '';
  display: block;
  height: 20px;
  width: 20px;
  background: #f00;
}
<div class="navbar-text">someText</div>

Upvotes: 1

Partho63
Partho63

Reputation: 3117

Is this what you want:

.navbar-text:before {
  display: inline-block;
  height: 10px;
  width: 10px;
  content: '';
  background: #f00;
}
<div class="navbar-text"> Some Text</div>

Upvotes: 0

Related Questions