Why I can't scale hyper link

Question

I want to scale hyper link but I can't.

Here is what I tried.

HTML

<div class="bgdf">
    <p>
        <small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span>  All Right Reserved &nbsp &nbsp| &nbsp &nbsp <a href="www.google.com"> Testing </a></small>
    </p>
</div>

I tried this

.bgdf a:hover{
    transform: scale(1.3);
}

.bgdf a:hover {
  transform: scale(1.3);
}

<div class="bgdf">
  <p>
    <small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span>  All Right Reserved &nbsp &nbsp| &nbsp &nbsp <a href="www.google.com"> Testing </a></small>
  </p>
</div>

Answer 1

It's because the a element is inline by default.

CSS Transforms Module Level 1 - Terminology - Transformable Element

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption
• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

Transformations don't apply to strictly inline elements. You could change the display of the anchor element to inline-block and it should work as expected.

Example Here

.bgdf a {
    display: inline-block;
}
.bgdf a:hover {
    transform: scale(2);
}