Is there a way to change link text in CSS?

Question

Is there a way to do this in CSS? To clarify I only have access to CSS and the HTML code is the one below. So I can't use span or any other tags surrounding the link text

From

<a href="something.com">example text</a>  

To

<a href="something.com">something else</a>  

Answer 1

Yes, like this:

body {
  /* just for demo */
  text-align: center;
  margin: 1em;
}
a {
  visibility: hidden;
  font-size: 0;
  /* collapse extra space */
}
a::before {
  content: "Now I'm This";
  visibility: visible;
  font-size: 16px;
  /* reset font size */
  font-weight: bold;
}

<p>Lorem ipsum dolor sit.<a href="something.com">I was This</a>Lorem ipsum dolor sit.</p>

Answer 2

A pure CSS way is to make use of the pseudo selectors :before or :after and content property.

Edit: Hide previous text without <span>

/* demo */
a { background:blue; text-align: center; color:#FFF; display:inline-block; padding:1em; }

/* hide original text */
a {
  position:relative;
  color:transparent;
}

/* new text with psuedo selector */
a:before {
  position:absolute;
  display:block;
  content: "something else";
  color:#FFF;
  z-index:1;
  left:0;
  right:0;
  font-size:initial;
}

<a href="#">something</a>

Explanation:

• First, we hide original text by making the text color transparent.
• Then we add the new text with a pseudo selector that has a visible color (in my example, white)

Used position: absolute to make sure the new text is ABOVE the original.