The other day I was visiting Grid Style Sheets and was fascinated by the fact that the underlines of the links seemed to expand on mouse over. At first I tried simply using transition
in conjunction with margin
and padding
but unfortunately the results were a bit shaky. Therefore I decided to actually examine the code and found they were using the ::before
pseudo-selector. After some tinkering around, I landed on this solution for a simplified version of expanding lines for all links:
a:link, a:visited { color: #66F; text-decoration: none; position: relative; transition: all 1s; } a:hover { color: #00F; } a:link::before, a:visited::before { background: #DDF; box-shadow: 0 0 1px #00F; content: ''; height: 2px; position: absolute; top: 100%; transition: all 1s; width: 80%; margin-left: 10%; } a:hover::before { background: #33F; box-shadow: 0 2px 2px #CCF; width: 110%; margin-left: -5%; }
Here is how the end result looks (try moving your mouse over either Google
or Bing
:
Pretty cool, right?! CSS3 Definitely adds some cool style to the web these days. š