How to find first letter of element and use it in ::before

Question

I got following setup:

(function($) {

  var text = $(".panel .panel-title a span").text();
  var first_letter = text.charAt(0);
  $(".panel-heading").attr('data-before', first_letter);

})(jQuery);

.panel-heading:before {
  content: attr(data-before);
  left: -25px;
  top: 6px;
  display: inline-block;
  position: absolute;
  height: 45px;
  width: 47px;
  z-index: 9999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>Piece rate work</span>
      </a>
    </p>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>Another Letter Here</span>
      </a>
    </p>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>More Letters Here</span>
      </a>
    </p>
  </div>

What I want to do is to find the first letter of the content in the span element, in this case, the letter P. And get this letter to the content of the .panel-heading::before pseudo element.

There are several .panel div's with the same sibling elements as the first .panel div inside. The span element in each of these is contains a different text, so a differtent first letter. So it should always get the relevant (first)letter and place it in the ::before content.

I managed with the help of @Michele De Falco to get the first letter and put it in the pseudo content. But it always get the first letter of the first .panel div and puts it everywhere.

Answer 1

I've updated your jQuery to use each() so the correct parent .panel-heading gets the correct data-before attribute:

(function($) {

  // For each .panel
  $('.panel').each(function() {
    // use let instead of var for scoping
    let text = $(this).find('a span').text();
    // make sure the span element exists.
    if (text) {
      // Get the first letter
      let first_letter = text.charAt(0);
      // use the original parent $(this) to set the the data-att to the correct child.
      $(this).find('.panel-heading').attr('data-before', first_letter);
    }
  });

})(jQuery);

.panel-heading:before {
  content: attr(data-before);
  left: -25px;
  top: 6px;
  display: inline-block;
  position: absolute;
  height: 45px;
  width: 47px;
  z-index: 9999;
}


/* TESTING ONLY */

.panel {
  position: relative;
  left: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>Piece rate work</span>
      </a>
    </p>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>Another Letter Here</span>
      </a>
    </p>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    <p class="panel-title">
      <a href="#aa1">
        <span>More Letters Here</span>
      </a>
    </p>
  </div>

Answer 2

Here is your example with jquery, use the text() function to get the text of your span tag, then use the charAt() function to get the first character, finally I used the before() function with reference to a span.before tag

$(document).ready(function(){
  
  var text = $('span.text').text();
  var first_letter = text.charAt(0)
  $( ".panel-heading > span.before" ).before( first_letter )
       
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel">
  <div class="panel-heading">
    <span class="before"></span>::before
    <p class="panel-title">
      <a href="#aa1">
        <span class="text">Piece rate work</span>
      </a>
    </p>
  </div>
</div>