[css3] css3の擬似クラスについて、共通使用前と共通使用後で説明する。

#example:before {
    content: "#";
    color: red;
}
 
#example:after {
    content: "$";
    color: red;
}

<div class="quote">
    <span>small house</span>
</div>
.quote:before,.quote:after{// Use these two pseudo-classes to achieve style rendering
     content:"";
     display:inline-block;
     width:5%;
     margin:5px 1%;
     border-bottom:1px solid blue;
}

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="parent2">parent2</div>
//css code
.box1{
     width:300px;
     height:200px;
     background-color: lightgray;
     float:left;
}
.box2{
     width:300px;
     height:100px;
     background-color: lightblue;
     float:left;
}
.parent2{
     width:400px;
     height: 400px;
     background-color:blue;
     color:#fff;
     text-align:center;
     line-height:400px;
     font-size:30px;
}

.parent:after{
     content:"";
     display:block;//set to block element
     clear:both; //use this attribute to clear the float
}