CSS-Tricks / ::before and ::after pseudo elements

<p>Apr 06, 2016 04:38 PM</p>

<p>

this is a great explanation... try it... &nbsp;this is in my folder called <b>before</b>...</p>

<p>

* I did ... it works................</p>

<p>

my html code is here...</p>

<p>

<body>

<div>Content for New Div Tag Goes Here</div>

</body></p>

<p>

*

the CSS is here...</p>

<p>

div::after {

&nbsp;content: " &nbsp;&nbsp;&nbsp;a long string is here";

}</p>

<p>

&nbsp;and here's how it appears....</p>

<p>

Content for New Div Tag Goes Here &nbsp;&nbsp;&nbsp;a long string is here</p>

<p>

and here.... this works *</p>

<p>

<body>

<div>Content for New Div Tag Goes Here</div>

<div class="test" > &nbsp;TEST content is here.</div>

</body></p>

<p>

with this CSS addition</p>

<p>

div::after {

&nbsp;content: " &nbsp;&nbsp;&nbsp;a long string is here";

}</p>

<p>

.test {

background-color: rgba(168,152,152,1.00);

}

<b>div.test::after {</b>

<b>content: "special test";}</b> &nbsp;&nbsp;......</p>

<p>

produces this output</p>

<p>

Content for New Div Tag Goes Here a long string is here

TEST content is here. special test</p>

<p>

*</p>

<p>

&nbsp;</p>