How to select a link that has the same anchor text and href value

Question

I want to style differently links that are have the anchor same as the href attribute value:

<a href="https://google.com">https://google.com</a>

Is it possible to do this with CSS alone, or do I need JavaScript for this?

try this a[href="https://google.com"]{ } in your css and give a try — Chandra Shekhar, May 01 '18 at 12:11
Kind of duplicate cause this is what you want https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — caramba, May 01 '18 at 12:15
Let me know if you are ok with a JS-based solution, then we can update the tags of your question accordingly, too :) — Terry, May 01 '18 at 12:25
Thank you, I updated with the solution I just implemented, JavaScript based. — Flavio Copes, May 01 '18 at 12:42

score 1 · Accepted Answer · answered May 01 '18 at 12:42

Thanks for your comments on this being impossible in CSS.

I ended up with this JavaScript solution:

document.addEventListener("DOMContentLoaded", () => {
  for (item of document.querySelectorAll("a[href*='//']")) {
    if (item.getAttribute('href') == item.innerHTML) { 
      //item is an HTML link with anchor same as innerHTML.
      //in this case, I just add a class to it

      item.classList.add('no-after-content') 
    }
  }
})

score 0 · Answer 2 · answered May 01 '18 at 12:50

A simple solution with javascript . Hope this helps.

<a href="https://google.com">https://google.com/</a><br />
<a href="https://google.com">https://yahoo.com/</a>

<script>
var myCol = document.getElementsByTagName("a");
for(i=0; i<  myCol.length; i++){

if((myCol[i].href).trim() == (myCol[i].innerHTML).trim()){
  myCol[i].style.color = "red";
}

}

</script>

How to select a link that has the same anchor text and href value

2 Answers2