Jquery evenly resize anchor text

Question

I am trying to evenly increase and then decrease the font size of anchor text inside a paragraph without moving the paragraph text. This way the anchor text will look as if it is coming toward the user and then receding back into its original place. The font-size also appears as if it is growing from the lower left corner as opposed to what I want which is evenly from all sides.

HTML:

<p>
  <a>[D]</a>I've been workin' on the railroad,
  <a>[G]</a>all the live long <a>[D]</a>day.
  <a>[D]</a>I've been workin' on the railroad,
  just to <a>[E]</a>pass the time a<a>[A]</a>way.
</p>

CSS:

p {
  white-space: pre-wrap;
}

a {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  color:red;
}
.increase-font {
  font-size: 30px;
  background:#FFF;
}

Jquery/Javascript:

$('a').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
});

Here is the fiddle:

https://jsfiddle.net/scooke/ro2tyf6h/

Answer 1

It's relatively simple - just wrap the anchor tags in span tags:

<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>

Set the anchor's position to relative (with a margin to give its children spans room), whilst also setting span tags to absolute:

a {
  position: relative;
  max-height: 0px;
  max-width: 0px; 
  margin-right: 25px;
}

span {
  position: absolute;
  top: 0;
  left: 0;
}

Then just swap the jQuery event handler from registering on all anchor tags to all span tags:

$('span').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
})

Seeing as absolute elements are removed from the DOM flow, resizing the spans doesn't effect the elements around it. Full code here:

https://jsfiddle.net/ro2tyf6h/5/

Answer 2

To achieve this, the anchor texts need to be somewhat independent from the parent. Inserting the anchor text with CSS :before or :after selectors will solve the problem. See my example and adjust as needed.

 $('a').on('click', function(e) { e.preventDefault(); var el = this; $(el).addClass('increase-font'); setTimeout(function() { $(el).removeClass('increase-font'); }, 1000); }) 

 p { white-space: pre-wrap; padding-left: 30px; display: inline-block; width: 100%; position: relative; } a { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; color: red; display: inline-block; position: relative; width: 30px; height: 10px; } a:before { content: "[D]"; position: absolute; left: 0; text-align: center!important; width: 100%; top: -5px; } .increase-font { font-size: 30px; background: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <a></a>I've been workin' on the railroad,</p> <p><a></a>all the live long <a></a>day.</p> <p><a></a>I've been workin' on the railroad, just to <a></a>pass the time a<a></a>way.</p> 

Suggestions:

1. Restructuring your HTML will be a good start
2. Adding a background to the :hover state will help keep it clean and distinguishable.