<h1>Showing that visited and unvisited links return the same computed style</h1>
<p>Feel free to modify the link's styles in the CSS tab.</p>
<a href="#visited" data-link>Show Visited Style</a>
<button>Reset Link</button>
<div class="scrollable" aria-labelledby="#table-label" tabindex="0">
<table>
  <caption id="table-label">Visited vs Unvisited Link's Computed Style</caption>
  <thead>
    <th scope="col">Unvisited</th>
    <th scope="col" >Visited</th>
  </thead>
  <tbody>
    <tr>
      <td><pre data-unvisited-style></pre></td>
      <td><pre id="visited" data-visited-style></pre></td>
    </tr>
  </tbody>
</table>
</div>
<p>This demo was created for the post <a href="https://css-tricks.com">Web Features May Not Work as You'd Expect</a> by <a href="https://codelab.farai.xyz">Farai Gandiya</a> on <a href="https://css-tricks.com">CSS Tricks</a>.</p>
a[data-link] {
  background-color: lightgrey;
  border: 1px solid green;
  color: blue;
  padding: 0.25rem;
}

a[data-link]:visited {
  background-color: white;
  border-color: red;
  color: purple;
  
  /*These aren't applied*/
  border-style: dashed;
  padding: 0;
}

/* Page layout things, ignore. */

html {
  font-family: sans-serif;
}

table {
  border: 2px solid black;
  border-collapse: collapse;
  margin-top: 1rem;
  min-height: 15ex;
}

th,td {
  border: 2px solid black;
  min-width: 35ch;
  padding: 0.25rem;
  text-align: left;
}

th {
  height: 1ch;
}

caption {
  text-align: left;
}

.scrollable {
  overflow-x: auto;
}

* {
  box-sizing: border-box;
}

pre {
  margin: 0;
}
const link = document.querySelector('[data-link]')
const visitedStyle = document.querySelector('[data-visited-style]')
const unvisitedStyle = document.querySelector('[data-unvisited-style]')
const resetButton = document.querySelector('button')
const properties = ["color", "background-color", "padding-left", "border-left-color", "border-left-width", "border-left-style"] // Set the properties to show the computed style for

resetButton.onclick = resetLink
resetLink()

function resetLink () {
  const id = Math.random().toString()
  link.href = "#" + id
  visitedStyle.id = id
  visitedStyle.innerText = ""
}

for (const prop of properties) {
  unvisitedStyle.innerText += `${prop}: ${window.getComputedStyle(link)[prop]};\n`
}

window.onhashchange = function() {
  visitedStyle.innerText = "";
  for (const prop of properties) {
  visitedStyle.innerText += `${prop}: ${window.getComputedStyle(link)[prop]};\n`
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.