Created
August 31, 2017 12:17
-
-
Save andysellick/f46ab4c82058ce0df05eec5053ea59c0 to your computer and use it in GitHub Desktop.
Next/Previous navigation accessibility testing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <h1>Testing ways of inserting a pause between visually distinct parts of a link</h1> | |
| <h2>No punctuation between the two texts</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| Previous | |
| </span> | |
| <span class="pub-c-pagination__link-label">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| Next | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="pub-c-pagination__link-label">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden colon</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| Previous | |
| </span> | |
| <span class="visually-hidden">:</span> | |
| <span class="pub-c-pagination__link-label">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| Next | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="visually-hidden">:</span> | |
| <span class="pub-c-pagination__link-label">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden period</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| Previous | |
| </span> | |
| <span class="visually-hidden">.</span> | |
| <span class="pub-c-pagination__link-label">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| Next | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="visually-hidden">.</span> | |
| <span class="pub-c-pagination__link-label">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden comma</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| Previous | |
| </span> | |
| <span class="visually-hidden">,</span> | |
| <span class="pub-c-pagination__link-label">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| Next | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="visually-hidden">,</span> | |
| <span class="pub-c-pagination__link-label">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden dash</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| Previous | |
| </span> | |
| <span class="visually-hidden">-</span> | |
| <span class="pub-c-pagination__link-label">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| Next | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="visually-hidden">-</span> | |
| <span class="pub-c-pagination__link-label">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden unicode right arrow</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| Previous | |
| </span> | |
| <span class="visually-hidden">→</span> | |
| <span class="pub-c-pagination__link-label">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| Next | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="visually-hidden">→</span> | |
| <span class="pub-c-pagination__link-label">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden period in an after pseudo element</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| <span class="periodafter">Previous</span> | |
| </span> | |
| <span class="pub-c-pagination__link-label">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| <span class="periodafter">Next</span> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="pub-c-pagination__link-label">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden colon in a before pseudo element</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| <span class="">Previous</span> | |
| </span> | |
| <span class="pub-c-pagination__link-label colonbefore">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| <span class="">Next</span> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="pub-c-pagination__link-label colonbefore">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden comma in a before pseudo element</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| <span class="">Previous</span> | |
| </span> | |
| <span class="pub-c-pagination__link-label commabefore">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| <span class="">Next</span> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="pub-c-pagination__link-label commabefore">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden dash in a before pseudo element</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| <span class="">Previous</span> | |
| </span> | |
| <span class="pub-c-pagination__link-label dashbefore">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| <span class="">Next</span> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="pub-c-pagination__link-label dashbefore">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>With a hidden unicode right arrow in a before pseudo element</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| <span class="">Previous</span> | |
| </span> | |
| <span class="pub-c-pagination__link-label arrowbefore">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| <span class="">Next</span> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="pub-c-pagination__link-label arrowbefore">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>Experimenting using aria labelled by</h2> | |
| <nav class="pub-c-pagination" role="navigation" aria-label="Pagination"> | |
| <ul class="pub-c-pagination__list"> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--previous"> | |
| <a href="previous-page" class="pub-c-pagination__link" rel="prev"> | |
| <span class="pub-c-pagination__link-title"> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | |
| </svg> | |
| <span id="previouslink">Previous</span> | |
| </span> | |
| <span class="pub-c-pagination__link-label" aria-labelledby="previouslink">Terrorism</span> | |
| </a> | |
| </li> | |
| <li class="pub-c-pagination__item pub-c-pagination__item--next"> | |
| <a href="next-page" class="pub-c-pagination__link" rel="next"> | |
| <span class="pub-c-pagination__link-title"> | |
| <span id="nextlink">Next</span> | |
| <svg class="pub-c-pagination__link-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13"> | |
| <path fill="currentColor" d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | |
| </svg> | |
| </span> | |
| <span class="pub-c-pagination__link-label" aria-labelledby="nextlink">Driver CPC part 1 test: theory</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h2>Some random tests</h2> | |
| <p><a href="#">.This is a sentence with a period at the start.</a></p> | |
| <p><a href="#">. This is a sentence with period space at the start.</a></p> | |
| <p><a href="#">:This is a sentence with a colon at the start.</a></p> | |
| <p><a href="#">: This is a sentence with colon space at the start.</a></p> | |
| <p><a href="#">,This is a sentence with a comma at the start.</a></p> | |
| <p><a href="#">, This is a sentence with comma space at the start.</a></p> | |
| <p><a href="#">This is a sentence. And so is this.</a></p> | |
| <p><a href="#">This is a sentence, with a comma in it.</a></p> | |
| <p><a href="#">This is a sentence: with a colon in it.</a></p> | |
| <p><a href="#">This is a sentence; with a semi-colon in it.</a></p> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .visually-hidden { | |
| position: absolute; | |
| left: -9999em; | |
| top: auto; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| .periodafter:after { | |
| content: "."; | |
| position: absolute; | |
| left: -9999em; | |
| top: auto; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| .colonbefore:before { | |
| content: ":"; | |
| position: absolute; | |
| left: -9999em; | |
| top: auto; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| .commabefore:before { | |
| content: ","; | |
| position: absolute; | |
| left: -9999em; | |
| top: auto; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| .dashbefore:before { | |
| content: "-"; | |
| position: absolute; | |
| left: -9999em; | |
| top: auto; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| .arrowbefore:before { | |
| content: "U+2192"; | |
| position: absolute; | |
| left: -9999em; | |
| top: auto; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| } | |
| //normal styling unrelated to this testing | |
| h2 { | |
| clear: both; | |
| } | |
| .pub-c-pagination { | |
| overflow: hidden; | |
| } | |
| .pub-c-pagination__item { | |
| list-style: none; | |
| } | |
| .pub-c-pagination__link { | |
| display: block; | |
| padding: $gutter-half; | |
| text-decoration: none; | |
| } | |
| .pub-c-pagination__link-title { | |
| display: block; | |
| } | |
| .pub-c-pagination__item--previous { | |
| @include media-down(mobile) { | |
| float: none; | |
| width: 100%; | |
| } | |
| float: left; | |
| text-align: left; | |
| } | |
| .pub-c-pagination__item--next { | |
| @include media-down(mobile) { | |
| float: none; | |
| width: 100%; | |
| } | |
| float: right; | |
| text-align: right; | |
| } | |
| .pub-c-pagination__link-icon { | |
| display: inline-block; | |
| margin-bottom: 1px; | |
| height: .482em; | |
| width: .63em; | |
| } | |
| .pub-c-pagination__link-label { | |
| display: inline-block; | |
| margin-top: 0.1em; | |
| text-decoration: underline; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment