Alex Latham Alex Latham - 26 days ago 5
HTML Question

Adding an ::after pseudo-element to HTML Generated in PHP

I currently have HTML generated by PHP which looks like this:

echo '<div class="right">';
echo '<p class = "triangle-isosceles left">'; the_sub_field("right_quote", false); echo '::after'; echo '</p>';
echo '</div>';


Which currently displays in html as:

<p>"This is the output of the_sub_field function ::after"</p>


When I want it to output as

<p>"This is the output of the_sub_field function" ::after</p>

Answer Source

a ::after or ::before are a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML).

While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after {
 content: "hi";
}

So to add a pseudo you must use css, try this :

 echo '<div class="right">';
 echo '<p class = "triangle-isosceles left">'; the_sub_field("right_quote", 
 false); echo '</p>';.
 echo '<style>p.triangle-isosceles:after{content:"something"}</style>';
 echo '</div>';

then the result would be like :

p.triangle-isosceles:after{
   content:" -> after content";
}
<p class="triangle-isosceles">"This is the output of the_sub_field function"</p>