[Solved] Make text section for the content :after and :before

[bikiran]

I want to add a content or let’s say paragraph before or after a div tag. So I made a div tag :

and for styling:

<style>
.post-header-title:after {
content:”Some Content”;
display: block;
padding-top: 10px;
font-size: 40px !important;
color: rgb(187, 185, 185) !important;
font-style: italic;
</style>

Here’s a link to codepen: http://codepen.io/anon/pen/Ggwjpj

I also landed to the following page:

https://css-tricks.com/css-content/

Everything worked but the content doesn’t seem to be selected. I want to make it like normal text/html.

And will such content be indexed by Search Engines or not? I need some help.

[Paulie_D]

Pseudo-elements are for styling not actual Content.

(The content property adds confusion here).

Pseudo-elements are not in the DOM and so can’t be selected or indexed by search engines.

Basically, if you’re putting actual content in there you’re using them incorrectly.

I want to make it like normal text/html.

That being the case, use actual text tags and if you need some special effects then alternative methods will be required.

[bikiran]

Paulie_D Thanks for your reply. Now I understood clearly.

The thing is that, I just want to display content where I can not write from blogger post editor. And also I don’t want my content to be displayed in other place not* where I write.

And for that, can’t we display content by giving class/ids..

Example:

In post editor:

Some content that I’d like to display.

I already have style for text:

<style>
.post-header-title:after {
content:”Some Content”;
display: block;
padding-top: 10px;
font-size: 40px !important;
color: rgb(187, 185, 185) !important;
font-style: italic;
</style>

Now I’d like to display this text below my Post Title.

I’m totally unknown about this thing. Can you please help me!

[Paulie_D]

The thing is that, I just want to display content where I can not write from blogger post editor.

Not sure what that means but it sounds like you need a new template with an extra area in which you can write stuff.

If you’re trying to add selectable and indexable content you can’t use a pseudo-element.

[bikiran]

Ok! Thank you very much for your help. Paulie_D

[Author]

Posts