Basic Usage: Pseudo elements

Tom Butler edited this page Dec 22, 2015 · 1 revision

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>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.