Geek Answers Handbook

Pseudo-elements not showing

Pseudo elements that are not displayed on a div. I use a sprite image, but I also tried an image without a sprite, but nothing. I tried several strategies such as absolute positioning using z-index, fields, etc. I seem to be doing it right, if I'm not mistaken, or, apparently, I'm doing something wrong. I am new to the community and searched here as well as Google, but there is no result in why it is not displayed. The code below is the simplest. Thanks to everyone who takes the time to help.

.test { display:inline-block; background:#fff; width:60%; } .test:before, .test:after { background:url("/imgs/Sprite2.png") repeat-y; } .test:before, .test:after { position:relative; display:inline-block; vertical-align:top; width:27px; height:100%; } .test:before { content:""; background-position:0 0; } .test:after { content:""; background-position:-55px 0; }

Now it works for me. The code is below. I could swear I already tried this, but I must have done something wrong the first time I did it.

  .test { background:#fff; width:60%;margin:0 0 60px 5%; } .test:before, .test:after { content:""; background:url("/imgs/Sprite2.png") repeat-y; position:absolute; top:0; width:27px; height:100%; } .test:before { right:100%; background-position:0 0; } .test:after { left:100%; background-position:-55px 0; }
+7
source share
3 answers

Here is the correct answer, since I never showed that I answered using the button. I simply put it at the top, thinking that it would be answered. Basically, I had to do something for the first time. Hope this helps people who have had problems like mines.

 .test { background: #fff; width: 60%; margin: 0 0 60px 5% } .test:before, .test:after { content: ""; background: url("/imgs/Sprite2.png") repeat-y; position: absolute; top: 0; width: 27px; height: 100% } .test:before { right: 100%; background-position: 0 0 } .test:after { left: 100%; background-position: -55px 0 }
+1
source

Edition:

This is the problem of height:100%; mentioned in .test:before,.test:after

You should mention height:100% - .test , and for html and body also

The following are suggested CSS changes:

Try the following:

 body, html { height: 100%; } .test{ display:inline-block; background:#fff; width:60%; height: 100%; /*added height*/ } .test:before, .test:after{ content:""; background:url("/imgs/Sprite2.png") repeat-y; position:relative; display:inline-block; vertical-align:top; width:27px; height:100%; } .test:before{ background-position:0 0 } .test:after{ background-position:-55px 0 }

Working demo

+5
source

It seems the problem was that your css properties were not declared / ordered correctly. From what I saw, you first announced a background image , but the content was declared last with a background position .

And I had my own problem with the Glyphicon font, which didn't show until I implemented what keaukraine talked about declaring the display property.

But sometimes people tend to forget about the declaration of the content property, which will lead to the disappearance of the expected result.

Therefore, it should be arranged something like this:

 element:before { content: "\e013"; // or content: "" background:url("background_image.png"); background-position: 0 0; display: inline-block; }
0
source

More articles:


All Articles