I am having a problem with how my template is handling html code that utilizes the :before and :after css properties. It seems the evaluation of the html and css is out of sync when parsed in the php file.
Background:
My header.php has the code:
<p class="top-message">
<?php
if ($pagename === 'PageA') {
echo converio_sanitize_text_decode('Some simple html');
} elseif ($pagename === 'PageB') {
echo converio_sanitize_text_decode('Some simple html');
} elseif ($top_header_msg <> '') {
echo converio_sanitize_text_decode($top_header_msg);
}
?>
</p>
I should note the functions converio_sanitize_text_decode is theme code and is not mine but it is pretty trivial so I will post it and is defined as:
function converio_stripslashes( $string ) {
if(get_magic_quotes_gpc()) {
return stripslashes($string);
} else {
return $string;
}
}
function converio_sanitize_text_decode( $string ) {
return converio_stripslashes(htmlspecialchars_decode($string));
}
This problem lies in the last else if where $top_header_msg =
<a class="call_button" href="tel:+1-505-555-5555" role="button">
<span class="cb">call us: (505) 555-5555</span>
<div class="ci">
<i class="fa fa-phone"></i>
<i class="fa fa-check"></i>
</div>
</a>
The css:
.call_button {
display: block;
background-color: #820024;
width: 300px;
height: 40px;
line-height: 40px;
margin: auto;
color: #fff;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.call_button span.cb, .call_button .ci {
display: block;
height: 100%;
text-align: center;
position: absolute;
top: 0;
}
.call_button span.cb {
width: 84%;
line-height: inherit;
font-size: 22px;
text-transform: uppercase;
left: 0;
-webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.call_button span.cb:after {
content: '';
background-color: #66001B;
width: 2px;
height: 70%;
position: absolute;
top: 15%;
right: -5px;
}
.call_button .ci {
width: 16%;
right: 0;
-webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.call_button .ci .fa {
font-size: 30px;
vertical-align: middle;
-webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
}
.call_button .ci .fa-phone {
height: 30px;
}
.call_button .ci .fa-check {
display: none;
}
.call_button.success span.cb, .call_button:hover span.cb {
left: -72%;
opacity: 0;
}
.call_button.success .ci, .call_button:hover .ci {
width: 100%;
}
.call_button.success .ci .fa, .call_button:hover .ci .fa {
font-size: 40px;
}
.call_button.success {
background-color: #27ae60;
}
.call_button.success .ci .fa-phone {
display: none;
}
.call_button.success .ci .fa-check {
display: inline-block;
}
.call_button:hover {
opacity: .9;
}
.call_button:hover .ci .fa-phone {
height: 40px;
}
.call_button:active {
opacity: 1;
}
The problem is it seems to be closing <p class="top-message"> before the html contained in $top_header_msg is fully evaluated. The end result is:
<p class="top-message">
<a class="call_button" href="tel:+1-505-555-5555" role="button">
<span class="cb">call us: (505) 555-5555::after</span>
</a>
</p>
<div class="ci">
<a class="call_button" href="tel:+1-505-555-5555" role="button">
<i class="fa fa-phone">::before</i>
<i class="fa fa-check">::before</i>
</a>
</div>
<a class="call_button" href="tel:+1-505-555-5555" role="button"></a>
You can see the </p> tag is entered prematurely and produces undesired results. What I need to happen:
<p class="top-message">
<a class="call_button" href="tel:+1-505-555-5555" role="button">
<span class="cb">call us: (505) 555-5555 ::after</span>
<div class="ci">
<i class="fa fa-phone">::before</i>
<i class="fa fa-check"></i>
</div>
</a>
</p>
I only get this behavior in the html here when ::before and ::after properties are utilized. I have tried searching for how to resolve this but to be honest am not quite sure what to search for and have been unsuccessful in finding any info.
Would greatly appreciate any insight.
Thanks