Why is `content:""` negating selectors below it?

Question

I am having a very odd problem.

So I have a huge pile of CSS, and among many selectors within it, I have selector that looks like this, which is working just fine:

.spoilertop, #QUOTETOP, #CODETOP, .utubetop {
    padding-left: 44px;
    font-size:12px;
}

But then I add a selector that looks like this just above it:

.spoilermain:after, #QUOTE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #766161;
    border-style: solid;
    display: block;
    width: 0;
}

And then the spoilertop, #QUOTETOP, #CODETOP, .utubetop { } stops working. It doesn't give me the visual effect that it should've given.

I tested it again with different selector. I have a selector that looks like this:

#recaptcha {
    background:#766161!important;
    font-size:11px;
}

Then I add this above it:

.utubemain:after, #CODE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #c08f84;
    border-style: solid;
    display: block;
    width: 0;
}

Again, the #recaptcha { } stops working.

I have tried to remove the properties one by one, and I found that the content: ""; is the one which is causing problem. For now the solution is putting a random unused selector below the { content: ""; }. So for example it will look like this:

.spoilermain:after, #QUOTE:after {
    content: "";
    position: absolute;
    top: -24px;
    left: 12px;
    border-width: 24px 24px 0 0;
    border-color: transparent #766161;
    border-style: solid;
    display: block;
    width: 0;
}

.some-line {
    border:#000;
    background:#200;
}

.spoilertop, #QUOTETOP, #CODETOP, .utubetop {
    padding-left: 44px;
    font-size:12px;
}

But that solution is kind of troublesome if I have a lot content: "";. And I'm really confused why is that kind of problem happening.

So... could anyone help me explain why?

What is the point of `content:"";`? Are you actually using an empty string in your code? — bhamlin, Apr 01 '12 at 20:35
That is not supposed to happen. Can you provide an example page? — user123444555621, Apr 01 '12 at 20:44
@Pumba80 Yes, it is really weird. About the example, since I was working in localhost and solved that problem (with that solution), I'll try to recreate it again. Oddly this does not occur if I start a new file though. — deathlock, Apr 01 '12 at 21:14
@BoltClock'saUnicorn - you are correct, it's a property not a pseudo-class (bad edit on my part). There is a `:contains` pseudo-class which *pertains* to content, but it has nothing to do with this question. http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#content-selectors — Tim M., Apr 02 '12 at 00:37
@Tim Medora: There used to be one, but [not anymore](http://stackoverflow.com/questions/4781141/why-h3nth-child1containsa-selector-doesnt-work/4781167#4781167) ;) — BoltClock, Apr 02 '12 at 00:47
_I would not think this would make a difference_, but have you tried using single quotes `content: '';` instead of double quotes? That's what I normally use when doing that, and I have never experienced the issue you mention. It really should not matter, but maybe it does. — ScottS, Apr 02 '12 at 02:04
@ScottS: yup, I have tried that. No difference, unfortunately. :/ — deathlock, Apr 03 '12 at 21:10

score 0 · Answer 1 · answered Apr 04 '12 at 12:23

0

This breaks the rule on redundancy, however, have you tried separate declarations for .spoilermain:after and #QUOTE:after?

answered Apr 04 '12 at 12:23

dwcouch

49
8

The empty string creates an [anonymous box](http://www.w3.org/TR/css3-content/#pending-inheritance) combined with display:block overrides the width:0 declaration, creating an invisible layer that overlaps other elements. Use display:inline instead, or try using "\A" as the value and add a border around the element so you can verify its dimensions. – Paul Sweatte Jul 31 '12 at 01:29

score -1 · Answer 2 · answered Oct 24 '13 at 16:23

-1

before and after are pseudo-elements but not pseudo-classes. So they shall be used as this:

.spoilermain::after 
{
}

but NOT as you did

.spoilermain:after 
{
}

Some browsers are quite permissive on that but in strict mode that should cause an error.

answered Oct 24 '13 at 16:23

c-smile

26,734
7
59
86

Why is `content:""` negating selectors below it?

2 Answers2