Custom text to tag using CSS

Question

I have a two <a> tags and it's HTML as below:

<ul>
  <li><a href="#">This is my link</a></li>
  <li><a href="#">This is my link</a></li>
</ul>

What I want is, to replace links text as this:

<ul>
  <li><a href="#">custom 1</a></li>
  <li><a href="#">custom 2</a></li>
</ul>

This is how I tried it using CSS. But still I couldn't figure this out.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  padding: 0;
  margin: 0;
}

ul li a {
  color: #fff;
  font-size: 0;
  position: relative;
}

ul li a:first-child:after {
  content: 'Custom 1';
  position: absolute;
  top: 0;
  left: 0;
}

ul li a:last-child:after {
  content: 'Custom 2';
  position: absolute;
  top: 0;
  left: 0;
}

Hope somebody may help me out. Thank you.

Vaibhav · Answer 1 · 2020-06-02T09:19:17.167

0

ul li:first-child a:before {
  content: 'Custom 1';
  position: absolute;
  color: DodgerBlue;
  background: #fff;
  width: 100px;
  text-decoration: underline;
}

ul li:last-child a:before {
  content: 'Custom 2';
  position: absolute;
  color: DodgerBlue;
  background: #fff;
  width: 100px;
  text-decoration: underline;
}

<ul>
  <li><a href="#">This is my link</a></li>
  <li><a href="#">This is my link</a></li>
</ul>

edited Jun 02 '20 at 09:19

answered Jun 02 '20 at 06:02

Vaibhav

1,412
1
10
14

Can we hide actual text without using `a{color: #fff}` ? In my case background color is dynamic. – user3733831 Jun 02 '20 at 06:17
Yes. try to add white background color to pseudo element, so it will hide text behind – Vaibhav Jun 02 '20 at 06:18
Yes I tried it. but its showing white background as a button – user3733831 Jun 02 '20 at 06:35
Edited answer. You need to some CSS changes. – Vaibhav Jun 02 '20 at 06:48

score -1 · Answer 2 · answered Jun 02 '20 at 05:55

-1

If you want to make it dynamicly, you should use a Script.. With this snnipet : document.getElementById("ahref1").innerHTML = "Google";

answered Jun 02 '20 at 05:55

David Sabillon

11
4

Thanks for your suggestion. But I am looking for a `CSS` solution – user3733831 Jun 02 '20 at 05:58

Custom text to tag using CSS

2 Answers2