CODEWITHSUNDEEP
css
dovla
dovla

Reputation: 311

Is there a way to change link text in CSS?

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>

Upvotes: 3

Views: 3936

Answers (3)

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 2

Aziz
Aziz

Reputation: 7783

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.

Upvotes: 1

solimanware
solimanware

Reputation: 3051

Changing content with CSS is a bit quirky

you can use javascript as follows :

document.getElementById("demo").innerHTML = "Another text"
<a id="demo" href="something.com">example text</a>

Upvotes: 0

Related Questions