Mysterious ':after' css rule

I have recently inherited a large web project. Before taking this on, I had primarily been working with applications, so so开发者_高级运维me of the technology is new to me.

The css has the following class:

.group:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Lots of things all over the website have group as one of their classes. As far as I can see, this is the only bit in the css that references it.

I tried taking away the group class in some places, as it didn't seem to be doing much. However, this caused all kinds of weird things to go wrong - for instance, colour from one element would seem to run on to the next. I don't see why adding a period to the end of the elements is stopping this.

Could anyone elighten me?

Edit: Here is one of the places where the group class is used. If I remove it, so that the div has only the class wrapper, the whole page breaks.

<div id="header">     
    <div class="wrapper group">  
        <div class="fl">
            <a href="default.aspx">myHandle</a> |
            <a href="~/features.aspx" runat="server" id="A1">features</a> |
            <a href="~/about-businessbook.aspx" runat="server" id="A3">about</a>
        </div> 
        <asp:Panel ID="pnlNotLoggedIn" runat="server" cssclass="fr">
            <a href="~/loginpro.aspx" runat="server" id="lnkHome">sign in</a> |
            <a href="~/registerpro.aspx" runat="server" id="lnkAbout">sign up</a>  
        </asp:Panel>
    </div>
</div>

---

That's more commonly known as "clearfix" - though "group" is arguably a more semantic class name, if less recognizable.

It's a technique to "clear/contain floats": http://www.ejeliot.com/blog/59

More information on clearfix:

• http://www.positioniseverything.net/easyclearing.html
• http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

---

What you're seeing is a .clearfix effect using the :after pseudo-class. When the hidden content block is added, the .group element will wrap all it's floated contents, which allows background colors to fill the correct area.

---

I could be mistaken, but it looks like .group:after is being used as a .clearfix in a way. While it may not seem like it's doing much, it's allowing the page to render correctly, so you should just leave it where it is.

---

:after is a pseudo-class which allows you to insert content after a selctor. In this case, it's adding a clear fix to properly clear .group which probably has floated content. This can cause the container not to expand to contain all the content. It's a rough equivalent of

<div class="group">
…content here…
    <div style="clear:both"></div>
</div>

The advantage of :after is that it doesn't require extra markup.

---

Also the fact that there is a clear: both; property defined implies that there are floats (e.g. float: right; or float: left;) in common use, and this class is being used to neutralize those.