Css blurry glass effect filters not working

Question

I am trying to do a css blurry glass effect with filters, but it's not working in the way it should. The div has no opacity at all and it's not blurry. Code(CSS):

#siteDesc
{
    text-align: center;
    background-color: #FFFFFF;
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 5px;
}
#siteDesc:after
{
    opacity: 0.7;
    filter: blur(1px);
    -moz-filter: blur(1px);
    -webkit-filter: blur(1px);
    -o-filter: blur(1px);
}

Edit:

Link to jsfiddle: http://jsfiddle.net/qy1sar8h/

Answer 1

The pseudo-element won't render without a content property and, in any case will not blur the associated parent div.

Applying a filter to the pseudo-element will only blur the content of the pseudo-element.

body {
  background-color: #37E1E4;
}
#siteDesc {
  text-align: center;
  background-color: #FFFFFF;
  margin: 0 auto;
  margin-top: 30px;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 5px;
}
#siteDesc:after {
  content: 'SOME TEXT';
  opacity: 0.7;
  filter: blur(1px);
  -moz-filter: blur(1px);
  -webkit-filter: blur(1px);
  -o-filter: blur(1px);
}

<div id="siteDesc">
  <p>Hello, this is my fiddle.</p>
</div>

If you apply the blur to the div itself you get this: JSFiddle Demo

EDIT: It's not entirely clear how this is supposed to look but the only option I see for blurring the background is not to have background on div element itself but rather simulate a background with a pseudo-element.

body {
  background-color: #37E1E4;
}
#siteDesc {
  text-align: center;
  width: 90%;
  margin: 10px auto;
  margin-top: 30px;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 5px;
  position: relative;
  font-weight:bold;
}
#siteDesc:before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  background-color: rgba(255,255,255,0.7);
  z-index:-1;
}

<div id="siteDesc">
  <p>Hello, this is my fiddle.</p>
</div>