h2 with link, decoration

HTML

<h2><a href="#">Заголовок с ссылкой</a></h2>

CSS

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/0eC6fl06luXEYWpBSJvXCD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

body {font-family: 'Roboto', sans-serif; padding: 50px;}

h2 {
    font-family: 'Roboto', sans-serif;
	font-size: 30px;
	line-height: 1.2;
	font-style: normal;
	font-weight: 300;
	color: #213239;
	margin: 0 0 8px;
}

h2 a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

h2 a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.1em;
    width: 100%;
    height: 1px;
    background: #00e;
}

h2 a:visited:after {
    background: #551a8b;
}

h2 a:active:after {
    background: #f00;
}