Change text on an element with :before text

JavaScript
1

Hi,

I have a span with :before content:

section#title.job-type-competition .listing-page-details .listing-page-entered-action  span.entered:before{
	content:"Entered this competition?";
	margin-right: 15px;
}

I have a checkbox and label which changes colour when clicking on the <span class="label-text"> which works fine.

					<div class="listing-page-entered-action">
					<span class="entered"></span>
					<!-- entered action -->
					<div class="entered-action">
						<span class="action-text competition-action-text freebie-action-text"></span>
						<label  for="<?php echo $post->ID; ?>">
						<input  class="label-checkbox" type="checkbox" id="<?php echo $post->ID; ?>" />
							<span class="label-text">
							  <span class="label-check">
								<i class="fa fa-check icon"></i>
							  </span>
							</span>
						</label>
					</div>
					<!-- end entered action -->
					</div>

What I am trying to do is change the text content on the :before element when the <span class="label-check"> is clicked.

:before{	content:"Entered this competition?"; }

I have the following which works, but I can’t get it to change the actual :before content.

$(document).ready(function () {
    var fold = $(".label-text");
    fold.cliked = 1;
    fold.click(function () {
        $("section#title.job-type-competition .listing-page-details .listing-page-entered-action  span.entered").text((fold.cliked++ % 2 == 0) ? "Fold it" : "Expand it");
    });
});

I’ve tried adding the :before in the jQuery, but its not working:

$("section#title.job-type-competition .listing-page-details .listing-page-entered-action span.entered:before"

Can anyone help me with changing the actual :before text?

Thanks

2

At the risk of sticking my nose in where its not wanted I can tell you that you can’t access the :before and :after pseudo elements with JS as they are not part of the DOM.

You can do something like this with js and css.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

.listing-page-entered-action  span.entered:before{
	content:attr(data-content);
	margin-right: 15px;
}
</style>
</head>

<body>
<div class="listing-page-entered-action"> 
	<span data-content="Entered this competition?" class="entered"></span> 
  <!-- entered action -->
  <div class="entered-action"> <span class="action-text competition-action-text freebie-action-text"></span>
    <label  for="<?php echo $post->ID; ?>">
      <input  class="label-checkbox" type="checkbox" id="<?php echo $post->ID; ?>" >
      <span class="label-text"> <span class="label-check"> <i class="fa fa-check icon">test</i> </span> </span> 
     </label>
  </div>
  <!-- end entered action --> 
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

$(document).ready(function () {
    var fold = $(".label-text");
	var text1,text2;
    fold.cliked = 1;
    fold.click(function () {
		if (fold.cliked++ % 2 == 0) {
		  text1 = "Fold it";
		  text2	= "foo : replaced text1 ";
		 } else {
	      text1 = "Expand it";
		  text2	= "bar : replaced text2 ";
		 }			
       	$(".listing-page-entered-action  span.entered").text(text1).attr('data-content', text2);	 
	});
});
</script>
</body>
</html>

I’m sure the JS could be refined considerably but the idea is to change the content of the data attribute and then CSS uses that to apply to the pseudo element.

2 Likes
3

Thank you very much :slight_smile: It worked :slight_smile:

4

Hi,

I’ve tried the code and I can’t get the content to display first when the page loads, so when the label is clicked, it then changes.

I’ve tried adding this line so the original text is shown when the page loads,

$(".title-share .job-type-competition .title-links .entered-action-item span.entered").html("Original Text");

but it doesn’t seem to replace it when clicked.

$(document).ready(function () {
	$(".title-share .job-type-competition .title-links .entered-action-item span.entered").html("Original Text");
    var fold = $(".label-text");
	var text1,text2;
    fold.cliked = 1;
	
    fold.click(function () {
		if (fold.cliked++ % 2 == 0) {
			text1 = "Original Text";
		  	text2	= "New Text";
		 } else {
	   		text1 = "Original Text";
			text2	= "Original Text";
		 }	
		
       	$(".title-share .job-type-competition .title-links .entered-action-item span.entered").text(text1).attr('data-content', text2);
	});
	
});

I’m basically trying to have text display there when the page loads and then it’s replaced back and forth when the label is clicked.

5

Put a data-content attribute into the span’s HTML.

I’m not sure why you’re messing about with :before’s at all? You’ve got the ability to write directly to the span, why mess with any of the rest of it?

6

As shown in my demo :slight_smile:

<span data-content="Entered this competition?" class="entered"></span>

True :slight_smile:

7

Thanks, sorry I missed the data-content part.

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.