::before and ::after

Its fleece was white as snow. the lamb was sure to go.

Used with active elements (links, buttons)

Note: Both links below go to Google and are for testing purposes only. Both buttons below have no functionality and for testing purposes only.

Select

Select

Let's Think About This...

First Store of Main Street

Source
×
<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Before and After</title>
		<script src="jquery.min.js"></script>
		<script src="presentation-mechanics.js"></script>
		<link rel="stylesheet" href="accessible-css-dialog.css">
		<style>
			span::before {
				content: 'Mary had a little lamb.';
			}
			span::after {
				content: 'And everywhere that Mary went,';
			}
			.gold::after {
				content: 'Gold Plan';
			}
			.diamond::after {
				content: 'Diamond Plan';
			}
		</style>
	</head>
	<body>
		<h1><code>::before </code>and<code> ::after</code></h1>
		<p>
			<span>
				Its fleece was white as snow.
			</span>
			the lamb was sure to go.
		</p>
        <h2>Used with active elements (links, buttons)</h2>
        <p>Note: Both links below go to Google and are for testing purposes only. Both buttons below have no functionality and for testing purposes only.</p>
        <p>
            <a href="https://www.google.com" class="gold">Select </a>
        </p>
        <p>
            <a href="https://www.google.com" class="diamond">Select </a>
        </p>
        <p>
            <button class="gold">Select </button>
        </p>
        <p>
            <button class="diamond">Select </button>
        </p>
        <h2>Let's Think About This...</h2>
        <p><a href="http://a11yideas.com/testcode/tableAfterPseud.html" onclick="document.location='http://a11yideas.com/testcode/tableAfterPseud.html';return false;">First Store of Main Street</a></p>
	
<div id="dialog" role="alertdialog" tabindex="-1" aria-labelledby="dialog-head" aria-describedby="dialog-body"></div><div class="button-container"><a href="#source-code" id="view-source">Source</a> <button id="dialog-trigger">Results</button></div><div id="source-code"><a href="#" id="x" aria-label="close">×</a></div></body>
</html>