Is there a way to make it so when my user hovers over normal text that is an anchor, the text smoothly transitions into oblique or italicized text to show it is a link (including an underline)

Here's an example of what I'm trying to do...

<a href="">
<p class="footertext">Take me to the old site...</p>
</a>

p.footertext {
font-size:12px;
padding-left:4px;
text-decoration:none; }
p.footertext:hover {
/*text:decoration: "italicize smoothly"*/ }

Is there a way to make it so when my user hovers over normal text that is an anchor, the text smoothly transitions into oblique or italicized text to show it is a link (including an underline)

Here's an example of what I'm trying to do...

<a href="http://oldsite.">
<p class="footertext">Take me to the old site...</p>
</a>

p.footertext {
font-size:12px;
padding-left:4px;
text-decoration:none; }
p.footertext:hover {
/*text:decoration: "italicize smoothly"*/ }

• javascript
• jquery
• html
• css
• web

• Not sure you can do that, at least not with plain CSS. – elclanrs Commented Sep 14, 2013 at 6:02

2 Answers 2

You can use CSS3 transform functions to simulate italic text. You can also use CSS3 transitions to get the smooth transition you're looking for.

.italic {
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.italic:hover {
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
}

JSFiddle

No. Skewed text is not the same as italicized text. An italic font is not simply a skewed font, it is pletely different. You can maybe cross-fade dissolve between the two, but skewed does not give you proper italicized text.