Basic Usage: Pseudo elements - Level-2/Transphporm GitHub Wiki

Pseudo elements

Transphporm supports several pseudo elements from CSS:

:before and :after which allows appending/prepending content to what is already there rather than overwriting it:

Before

$data = new stdclass;

$data->title = 'My Title!';
$data->description = 'Description of the page...';


$xml = '
	<h1>Example Title</h1>
	';

$tss = '
	h1:before {content: "BEFORE ";}
';

$template = new \Transphporm\Builder($xml, $tss);

echo $template->output($data)->body;

Output:

<h1>BEFORE Example Title</h1>

After

$data = new stdclass;

$data->title = 'My Title!';
$data->description = 'Description of the page...';


$xml = '
	<h1>Example Title</h1>
	';

$tss = '
	h1:after {content: " AFTER";}
';

$template = new \Transphporm\Builder($xml, $tss)

echo $template->output($data)->body;

Output:

<h1>Example Title AFTER</h1>

:nth-child();

Straight from CSS, Transphporm also supports nth-child(NUM). As well as nth-child(odd) and nth-child(even)

$xml = '
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li>Four</li>
		</ul>
';

$tss = 'ul li:nth-child(2) {content: "REPLACED"}';

$template = new \Transphporm\Builder($template, $tss);

echo $template->output()->body;

Output:

		<ul>
			<li>One</li>
			<li>REPLACED</li>
			<li>Three</li>
			<li>Four</li>
		</ul>

Even

$xml = '
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li>Four</li>
		</ul>
';

$tss = 'ul li:nth-child(even) {content: "REPLACED"}';

$template = new \Transphporm\Builder($template, $tss);
echo $template->output()->body;

Output:

		<ul>
			<li>One</li>
			<li>REPLACED</li>
			<li>Three</li>
			<li>REPLACED</li>
		</ul>

Odd

$xml = '
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li>Four</li>
		</ul>
';

$tss = 'ul li:nth-child(even) {content: "REPLACED"}';

$template = new \Transphporm\Builder($template, $tss);
echo $template->output()->body;

Output:

		<ul>
			<li>REPLACED</li>
			<li>Two</li>
			<li>REPLACED</li>
			<li>Four</li>
		</ul>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️