After and Before css

by Rayudu Ikkurthi

HTML

<!-- nth child selectors -->
<div id="links">
    <a href="www.google.com">google</a>
    <a href="www.yahoo.com">yahoo</a>
    <a href="www.bing.com">bing</a>
</div>
<!-- befor and after Selectors -->
<div id="content">
    Bangalore
</div>
<!-- first letter selector -->
<p>hellow there</p>

CSS

#links a:nth-child(1){
    color:blue;
}
#links a:nth-child(2){
    color:green;
}
#links a:nth-child(3){
    color:purple;
}

#content::before{
    content: '<<';
    margin-left:-10px;
}
#content::after{
    content: '>>';
}
p::first-letter{
    text-transform: uppercase;
}