CSS - Transform function not working on links?

Question

I did like so when a href's extension is .pdf; .doc; .ppt; .xls then it'll add corresponding file picture in front of it. Then I tried making a link go smaller when I hover over it but I doesn't do anything! Am I doing something wrong or what?

Code:

ul{
  list-style-type: none;
}
ul a{
  text-decoration:none;
  padding-left: 20px;
  background-repeat: no-repeat;
}
ul a:hover{
  text-decoration:underline;
  color:#666;
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
a[href$=".pdf"]{
  background-image:url(https://i.sstatic.net/zJlYq.gif);
}
a[href$=".doc"]{
  background-image:url(https://i.sstatic.net/z2lbW.gif);
}
a[href$=".ppt"]{
  background-image:url(https://i.sstatic.net/Tk5Vv.gif);
}
a[href$=".xls"]{
  background-image:url(https://i.sstatic.net/sOr7E.gif);
}

<ul>
  <li><a href="/one.pdf">pdf</a></li>
  <li><a href="/two.doc">doc</a></li>
  <li><a href="/three.ppt">ppt</a></li>
  <li><a href="/four.xls">xls</a></li>
</ul>

stackoverflow.com/questions/30483787/…

ROMANIA_engineer
– ROMANIA_engineer

2016-01-10 20:06:10 +00:00
Commented Jan 10, 2016 at 20:06 — ROMANIA_engineer
– ROMANIA_engineer, Commented Jan 10, 2016 at 20:06

sergdenisov · Accepted Answer · 2016-01-10 20:43:29Z

12

You should use display: inline-block for <a> tag (or display: block), because <a> has display: inline by default, but transformable element can't be with display: inline:

Transformable element — an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or ...

Inline-block — this value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

ul {
    list-style-type: none;
}

ul a {
    text-decoration: none;
    padding-left: 20px;
    background-repeat: no-repeat;
    display: inline-block;
}

ul a:hover {
    text-decoration: underline;
    color: #666;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

a[href $= '.pdf'] {
    background-image: url(https://i.sstatic.net/zJlYq.gif);
}

a[href $= '.doc'] {
    background-image: url(https://i.sstatic.net/z2lbW.gif);
}

a[href $= '.ppt'] {
    background-image: url(https://i.sstatic.net/Tk5Vv.gif);
}

a[href $= '.xls'] {
    background-image: url(https://i.sstatic.net/sOr7E.gif);
}

<ul>
    <li><a href="/one.pdf">pdf</a></li>
    <li><a href="/two.doc">doc</a></li>
    <li><a href="/three.ppt">ppt</a></li>
    <li><a href="/four.xls">xls</a></li>
</ul>

edited Jan 10, 2016 at 20:43

answered Jan 10, 2016 at 20:05

sergdenisov

8,6129 gold badges52 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joel Over a year ago

Accepted, sorry i'm new to this Stack Overflow.

Sebastian Brosch · Accepted Answer · 2016-01-10 20:11:40Z

transform is not applicable to inline elements such as <a>. You could display the link as inline-block or block to get transform to work!

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 [CSS21]

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

http://www.w3.org/TR/css3-transforms/#transformable-element
http://www.w3.org/TR/css3-transforms/#transform-property

This code is working:

ul{
  list-style-type: none;
}
ul a{
  display:inline-block;
  text-decoration:none;
  padding-left: 20px;
  background-repeat: no-repeat;
}
ul a:hover{
  display:inline-block;
  text-decoration:underline;
  color:#666;
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
a[href$=".pdf"]{
  background-image:url(http://placehold.it/20x20);
}
a[href$=".doc"]{
  background-image:url(http://placehold.it/20x20);
}
a[href$=".ppt"]{
  background-image:url(http://placehold.it/20x20);
}
a[href$=".xls"]{
  background-image:url(http://placehold.it/20x20);
}

<ul>
  <li><a href="/one.pdf">pdf</a></li>
  <li><a href="/two.doc">doc</a></li>
  <li><a href="/three.ppt">ppt</a></li>
  <li><a href="/four.xls">xls</a></li>
</ul>

mikevoermans · Accepted Answer · 2016-01-10 20:06:22Z

1

Put display: inline-block on the link elements. You can't seem to transform inline elements. Also - your syntax should be perfectly valid, though you likely have too many prefixes. Only IE9 should need the MS prefix, I'd doubt any others would be needed.

answered Jan 10, 2016 at 20:06

mikevoermans

4,00725 silver badges27 bronze badges

Collectives™ on Stack Overflow

CSS - Transform function not working on links?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related