CSS continued

Saurabh Sharma

Pseudo classes

State dependent styling, e.g Style a checkbox when it is in checked state. It is usually denoted by a preceding colon ‘:’ (without the quote).



<div id=”myDiv”> <a href=#> Dummy link</a> </div>


div {
background: cyan;
margin: 15px 0px 15px 25px;
border: 0px;

div:focus {
border: 1px;
a {
text-decoration: none;
color: red;

a:visited {
color: rosybrown;

a:hover {
color: green;
text-decoration: overline;

Pseudo elements

Keywords denoted by two colons (::) specified at the end of selector.

I am trying to add the URL information after the Anchor content.

div id=”myDiv”> <a href=”http://www.yahoo.com”> Dummy link</a> </div>

Using the style and the pseudo element ::after

a::after {
content: ” (” attr(href) “)”;

Brings the desired result

Dummy link