Shadowed underlined text with perspective - html

Question

I have the following html structure where I style my titles with an underline and a shadow.
.title {
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: underline;
text-underline-position: under;
}
<div class="container">
<div class="content">
<div class="title">MY TITLE
</div>
</div>
</div>
I tried to apply a perspective effect with the following css
.container {
-webkit-perspective: 150px;
perspective: 150px;
}
.content {
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg);
}
<div class="container">
<div class="content">
<div class="title">MY TITLE
</div>
</div>
</div>
As you can see, it works fine on the text but on the underline the shadow is not displayed and the distance from the text (text-underline-position: under;) is ignored.
Is there a way to display the shadow and keep the correct distance of the underline from the text when using the perspective?

Answer 1

You can simulate the underline with the pseudo element before:
.title {
display: inline-block;
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
position: relative;
text-shadow: 2px 2px #32c8ff;
text-decoration: none;
}
.title::before {
border-bottom: 2px solid #000;
bottom: 0;
content: "";
position: absolute;
left: 0;
right: 0;
box-shadow: 2px 2px #32c8ff;
}
See the example here

Answer 2

Another possibility: Fiddle
.title, .subtitle {
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-align: center;
}
.title {
border-bottom: 2px solid;
box-shadow: 2px 2px #32c8ff;
}
.container {
display: table-cell;
-webkit-transform: rotateX(45deg);
transform: rotateX(25deg);
}
.content {
-webkit-transform: rotateX(45deg);
transform: rotateX(25deg);
}
<div class="container">
<div class="content">
<div class="title">GREENPEACE</div>
<div class="subtitle">THE SURFER</div>
</div>
</div>

Answer 3

Check this out:
https://jsfiddle.net/zzhn5gh7/
.container {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
.title {
width: 100%;
height: 100%;
position: absolute;
background: green;
font-size: 35px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: underline;
text-underline-position: under;
}
#rotate-x .title {
-webkit-transform: rotateX( 45deg);
-moz-transform: rotateX( 45deg);
-o-transform: rotateX( 45deg);
transform: rotateX( 45deg);
}
<div id="rotate-x" class="container">
<div class="title">MY TITLE
</div>

Answer 4

The right solution for me was the following:
.title {
display: inline-block;
position: relative;
font-size: 28px;
line-height: 2.5;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: none;
}
.title::before {
border-bottom: 4px solid #ffffff;
bottom: 0;
content: "";
position: absolute;
left: 0;
right: 0;
box-shadow: 2px 2px #32c8ff;
margin: 11px 0px;
}
.subtitle {
font-size: 28px;
line-height: 0.7;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
}