#sample1 { text-align: left; width: 70%; margin-top: 70px; margin-bottom: 30px; } .sampleA:after { content: "after"; font-size: 12px; background: #aaa; color: #fff; padding: 3px 3px 3px 3px; margin-left: 5px; border-radius: 3px; } .sampleB:before { content: "before"; font-size: 12px; background: #aaa; color: #fff; padding: 3px 3px 3px 3px; margin-right: 5px; border-radius: 3px; } #sample2 { width: 70%; text-align: left; margin-top: 30px; margin-bottom: 30px; } #sample2 li{ list-style: none; counter-increment : number; } #sample2 li:before { content : "第" counter(number) "項"; padding-right: 10px; } #sample3 { position:relative; padding:15px; background:#ecf0f1; color:#2c3e50; font-size:40px; text-align:center; z-index:2; overflow:hidden; width: 70%; margin-bottom:30px; margin-left: 20px; } #sample3:before { position:absolute; top:-25px; left:2px; content:"sample3"; display:block; color:rgba(000,000,000,0.05); font-size: 125px; font-weight:bold; letter-spacing: 0.1rem; line-height:1; -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-10deg); z-index:-1; } #sample4 { position:relative; padding:15px; background:#ecf0f1; color:#2c3e50; font-size:40px; text-align:center; z-index:2; overflow:hidden; width: 70%; margin-left: 20px; } #sample4:before { position:absolute; top:-30px; left:3rem; content: url("../img/@.png")"rise"; display:block; color:rgba(000,000,000,0.25); font-size: 25px; font-weight:bold; letter-spacing: 0.1rem; line-height:1; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg); z-index:-1; } #sample5 { margin: 30px; } #sample5 a:after { content: "["attr(href)"]"; color: #333; } #sample6 { margin: 30px; padding-bottom:30px; } #sample6 ul { list-style-type: none; margin-top: 0; } #sample6 li { float: left; } #sample6 li + li:before { content: ">"; margin-left: 10px; margin-right: 10px; }