Is it possible to access the text of an anchor tag using CSS?


Alan Bertil

Below is my HTML

<a href="/content/testsite/en_gb/home/acis.html" class="">Branding</a>

Is it possible to access the text of an anchor tag using CSS? I want something like this? The html is dynamically generated so please don't mention having an id or having any classes.

a[text='Branding']
{
}
Fronto

People have already told you that you can't select text in CSS . But I think there are some workarounds. I don't know what you're trying to do, it's probably a bad thing, but if I were you, I'd take this bad practice :

/*First you hide the text*/
a {
   font-size: 0; /* hide text */
   text-decoration: none !important; /* get rid of that awful underline */
}
/* then you insert a new element using :before */
a:before {
    content: 'Branding'; /* This is the text you want for the new element */
    color: #333;
    font-size: 15px; /* Bring back the text inside the anchor for this new element */
    font: 24px sans-serif;
}

Fiddle : http://jsfiddle.net/tsu7z546/ _

If you want to try jQuery, do the following:

$(document).ready(function(){

    var brandingAnchor = $('a:contains("Branding")');

    brandingAnchor.hide();
});

remember! Every time you write jQuery code, you must have called the jQuery library on the page, like this:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    //Your jQuery code goes HERE, just below the library

$(document).ready(function(){

    var brandingAnchor = $('a:contains("Branding")');

    brandingAnchor.hide();
});

</script>

Related


Is it possible to access the text of an anchor tag using CSS?

Alan Bertil Below is my HTML <a href="/content/testsite/en_gb/home/acis.html" class="">Branding</a> Is it possible to access the text of an anchor tag using CSS? I want something like this? The html is dynamically generated so please don't mention having an i

Add span tag between text of anchor tag using jQuery

Jkumar How do you add a span tag before the text inside the hyperlink? Right now, I am using this: <script type="text/javascript"> $("a").before('<span class="k-icon k-add"></span>'); </script> I tried the code above but the desired span is before the anc

Add span tag between text of anchor tag using jQuery

Jkumar How do you add a span tag before the text inside the hyperlink? Right now, I am using this: <script type="text/javascript"> $("a").before('<span class="k-icon k-add"></span>'); </script> I tried the code above but the desired span is before the anc

Click on anchor tag with text

Tania How to click on anchor tag with specific text? For example, I have the following anchors in my page <a>one</a> <a>two</a> <a>three</a> Now, the user enters one. How to click a label with text as one? I tried this: var uservar='one'; $('a [text=$uservar]

Click on anchor tag with text

Tania How to click on anchor tag with specific text? For example, I have the following anchors in my page <a>one</a> <a>two</a> <a>three</a> Now, the user enters one. How to click a label with text as one? I tried this: var uservar='one'; $('a [text=$uservar]

Vertically center anchor tag text after setting height in CSS

Brett East I have an anchor tag and have given it a height and background color, but I can't get the text to align vertically in the middle of the background color. I would like to have the same background color above and below the text, but the height is both

Vertically center anchor tag text after setting height in CSS

Brett East I have an anchor tag and have given it a height and background color, but I can't get the text to align vertically in the middle of the background color. I would like to have the same background color above and below the text, but the height is both

Replace anchor tag text after click without removing CSS

hmav25 Once I click it using jquery( replaceWith) I change the anchor tag text and it works fine. However, it also replaces the css of the anchor tag text. Can anyone help me how not to replace the css or add it again. My html is as follows: <div class="col-xs

Vertically center anchor tag text after setting height in CSS

Brett East I have an anchor tag and have given it a height and background color, but I can't get the text to align vertically in the middle of the background color. I would like to have the same background color above and below the text, but the height is both

Vertically center anchor tag text after setting height in CSS

Brett East I have an anchor tag and have given it a height and background color, but I can't get the text to align vertically in the middle of the background color. I would like to have the same background color above and below the text, but the height is both

How to replace anchor tag text using C#?

Balgav I am trying to replace anchor tag value using regex Regex.Match(link, @"<a [^>]*>(.*?)</a>").Groups[1].Value.ToString();This gives me the anchor tag text. I tried using "Regex.replace" but I can't replace the exact text. example: var link="<a href="">Sa

How to change anchor tag's text on click using jquery?

Start I want to change the text of anchor tag on click event using jquery. Anchor Tag: <a id="view_email" href="#"><i class="fa fa-envelope"></i> View Email</a> query code: <script type="text/javascript"> $(document).ready(function(){ $("#view_email").cl

How to replace anchor tag text using C#?

Balgav I am trying to replace anchor tag value using regex Regex.Match(link, @"<a [^>]*>(.*?)</a>").Groups[1].Value.ToString();This gives me the anchor tag text. I tried using "Regex.replace" but I can't replace the exact text. example: var link="<a href="">Sa

How to remove anchor tag text using java script

box How to remove anchor tag text and href links using javascriptOrJquery <a id="ancID" href="Javascript:void(0)">Here insert a dynamic text </a> I want to remove text inserted between anchor tags. Fair You can .text('')delete text by assigning an empty strin

Extract anchor tag's href given text using Xpath

username I need to extract url from href attribute given specific text of anchor tag. from scrapy.spider import Spider from scrapy.selector import Selector from nba.items import NBAItem class ESPNSpider(Spider): name = "ESPN" allowed_domains = ["espn.

Change color of selected anchor tag text using javascript

Homer Kamal I am trying to create a navigation menu as shown below. How can I get my javascript to change the color of the selected anchor tag menu. HTML <script type="text/javascript"> $(function() { $("#menu ul li a").click(function() { // remo

Extract anchor tag's href given text using Xpath

username I need to extract the url from the href attribute of a specific text given an anchor tag. from scrapy.spider import Spider from scrapy.selector import Selector from nba.items import NBAItem class ESPNSpider(Spider): name = "ESPN" allowed_doma

Change anchor tag text when using PhoneGap and jQuery

Jeff Clark As a preamble, I'm using PhoneGap. When I click on the category title, I have fetched that title and set it in sessionStorage. Now I want to set the "back" button of the new PhoneGap page (showing some information contained in the category) to the c

How to remove anchor tag text using java script

box How to remove anchor tag text and href links using javascriptOrJquery <a id="ancID" href="Javascript:void(0)">Here insert a dynamic text </a> I want to remove text inserted between anchor tags. Fair You can .text('')delete text by assigning an empty strin