WordPress, Web Links, and CSS

Background

I have family members that are full-stack developers.

Not so here.

No Surprise

And, so then I am going to need all of the Web ( Stack Overflow & Blogs ) to get me through this.

Started

It started a couple of posts back.

I was trying to write about Instance Metadata and referenced the endpoint.

That endpoint is http://169.254.169.254/latest/meta-data/.

Obviously 169.254.169.254 is a non-routable address and we do not want people inadvertently clicking on it.

 

Correction

Here is the original entry

Original

HTML

Here is the HTML Code

<a href="http://169.254.169.254/latest/meta-data/">
    http://169.254.169.254/latest/meta-data/.
</a>

Output

Original :-
http://169.254.169.254/latest/meta-data/.

 

Revision

Outline

  1. Access Site Customizer
    • Create Style Sheet Entry
      • Give it name
        • Properties
          • color: currentColor;
          • cursor: not-allowed;
          • opacity: .5;
          • text-decoration: none;
          • pointer-events: none;
  2. Access Post
    • Access HTML Links
      • Add Class Reference

 

CSS

To correct, let us use CSS.


.linkisDisabled
{
	color: currentColor;
	cursor: not-allowed;
	opacity: .5;
	text-decoration: none;
	pointer-events: none;
}

HTML

Here is the HTML Code

<a class="linkisDisabled" href="http://169.254.169.254/latest/meta-data/">
http://169.254.169.254/latest/meta-data/.
</a>

 

Result

Revised :-
http://169.254.169.254/latest/meta-data/.

 

Crediting

Always got to credit someone.

Today it is Gerard Cohen.

CSS-Tricks
Gerard Cohen
How to Disable Links
Link

References

  1. Stack Overflow
    • How to disable a link using only CSS?
      Link

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s