User:Mediarch/Page.css
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
body { font-family: 'Roboto', sans-serif; padding: 0; margin: 0; } nav { width: 100%; margin: 0 auto; background: lightpink; padding: 10px ; box-shadow: 0 5px 5px hotpink; } nav ul { list-style: none; text-align: center; } nav ul li { display: inline-block; } nav ul li a { display: block; padding: 15px; text-decoration: none; color: hotpink; font-weight: 800; text-transform: uppercase; margin: 0 10px; } nav ul li a, nav ul li a:after, nav ul li a:before { transition: all .5s; } nav ul li a:hover { color: #555; } /* SHIFT */ nav.shift ul li a { position:relative; z-index: 1; } nav.shift ul li a:hover { color: hotpink; } nav.shift ul li a:after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 1px; content: '.'; color: transparent; background: #FFF; visibility: hidden; opacity: 0; z-index: -1; } nav.shift ul li a:hover:after { opacity: 1; visibility: visible; height: 100%; }