Why Are There Two Colons Here? Span::Before

Why are there two colons here? span::before

It's a pseudo-element, as defined by the CSS Selectors Level 3 spec:

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content.

It is effectively the same as the single-colon syntax defined by the level 2 spec. The level 3 spec introduces an extra colon to differentiate between pseudo-elements and pseudo-classes (which use a single colon).

Both syntaxes will work in newer browsers, but older browsers will not recognise the newer :: style.

---

For even more detail, you can look at the grammar from the level 3 spec, which states:

'::' starts a pseudo-element, ':' a pseudo-class

What is :: (double colon) in Python when subscripting sequences?

it means 'nothing for the first argument, nothing for the second, and jump by three'. It gets every third item of the sequence sliced.
Extended slices is what you want. New in Python 2.3

Pseudo element on div and span

The space makes a difference. When you put #test :before, it implies:

#test *::before

The above means the ::before pseudo element of all the containing ones.

And without the space: #test:before, it implies:

#test::before

This will affect only the #test, which is what you are looking for. See both the snippets, that use with and without space:

#test :before {  content:"before is here ";  color:red;}

<div id="test">  <span>Span 1</span>  <span>Span 2</span></div>

How can I get IE8 to accept a CSS :before tag?

Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode.

IE8 supports :before, but not and also images as content when not in compatibility mode. Kudos to @toscho for testing!

• Source

• Detailed comparison of which browsers can deal with what sort of content

How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!

What is Ruby's double-colon `::`?

:: is basically a namespace resolution operator. It allows you to access items in modules, or class-level items in classes. For example, say you had this setup:

module SomeModule
    module InnerModule
        class MyClass
            CONSTANT = 4
        end
    end
end

You could access CONSTANT from outside the module as SomeModule::InnerModule::MyClass::CONSTANT.

It doesn't affect instance methods defined on a class, since you access those with a different syntax (the dot .).

Relevant note: If you want to go back to the top-level namespace, do this: ::SomeModule – Benjamin Oakes

Double border with only one element

It can be done. I've used vw units.

Take a look at this Working Fiddle

HTML:

<h1 class="SpecialBorder">Title</h1>

CSS:

*
{
    margin: 0;
    padding: 0;
}
.SpecialBorder
{
    display: inline-block;
    position: relative;
}
.SpecialBorder:before , .SpecialBorder:after
{
    content:'';
    position: absolute;
    left: 0;
    bottom: 0;
}
.SpecialBorder:before
{
    width: 100vw;
    border-bottom: 1px solid red;
}
.SpecialBorder:after
{
    width: 100%;
    border-bottom: 1px solid blue;
}

Explanation:
the before & after pseudo elements are the ones that draw the borders.
both of them are empty elements. with a certain width that causes their border to be visible.

they are absolutely position at the bottom of their <h1> parent.

before: responsible for the red border. so his width is set to '100%' of view port.
after: responsible for the red border. so hes width is set to 100% of his parent (the <h1>), that's why the h1 is set to `display:inline-block;" (so it will span ony just as his content)

vw unit is supported by new browsers only.

notice that if you cant use vw units, you can still make something familiar to that.
delete the display:inline-block; from h1 (causing it to span all the way again)
change the width of before to 100% (to make it span all the way),
change the with of after to some fixed value of your choice.

Edit: as thgaskell stated in th comment,

there's a bug where vw units don't update properly on webkit
browsers when the window is resized.

Edit 2:
for making elements to show after the title, you can use a <br /> tag, or clearing techniques like showed here.

Is it possible to use two icons in css content one below other

You can't add more than one to the :before pseudo element.

I'd recommend doing this if :after element is not already being used:

  .fa-unsorted:before, .fa-sort:before {
        content: '\e9c2';
        margin-top: -10px;
        color: #999999;
        font-family: 'icomoon';
    }

    .fa-unsorted:after, .fa-sort:after{
        content: '\e9c1';
        margin-top: -15px;
        color: #999999;
        font-family: 'icomoon';
        right:0;
    }

---

Related Topics