How to add css pseudo elements...

User 434929 Photo


Ambassador
938 posts

How do I suppose to add css pseudo elements such ass ::before & ::after for generating content within RSD?

We can do a whole bunch of amazing things with pseudo elements.

For ::first-letter ::first-line and ::selection RSD adds <span> </span> tag in html, it's not bad but in same time RSD missing those amazing cool stuffs.

And in same time CSS Pseudo Classes for :first-child and :target is very important to have
Guys at coffeecup are awesometacular.
User 232214 Photo


COO
827 posts

Looking into this (in addition to the many of the other suggestions :P) — this might be easy or harder to implement depending on the workflow and UI updates that come with it. If you can give us a few use cases or design examples we can get a better idea how / when to add this.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 434929 Photo


Ambassador
938 posts

I am very big fan of CSS Pseudo-elements and class and I am sure others too.

Unfortunately RSD missing amazing feature of CSS Pseudo Elements especially :before & :after which for example we can add font icon, svg,, png inside the buttons and few other great stuffs

For creating pure CSS modal (dialog box) / Lightbox or pure CSS tabs and etc.. within RSD all we need is " ::CSS3 ::target /:target Selector " and off course we can do other amazing coooool stuffs too :)

Please have look at this demo pure CSS modal
http://www.w3schools.com/cssref/tryit.a … rget_modal

CSS Pseudo Elements
Selector Example Example description
----------------------------------------------------
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user

If we can't have it all , at least provide :before & :after Pseudo Elements please

And for CSS Pseudo Classes

we are limited to few such as :hover :active :visited and :focus but I found out RSD missing this great Pseudo Class such as::target as we have plenty of Pseudo Classes others and few of them is essential to have it.


I made quick lousy pure css lightbox with just adding a single line of css after export which is
:target selector to show hidden container and it very easy to make Pure CSS tabs too with same method.

Example :
.row > [class*='coffee-span-'] > .container.modal:target {
display: block;
}

For more please have a look at following link with examples http://www.w3schools.com/css/css_pseudo_elements.asp

Thank you
Guys at coffeecup are awesometacular.
User 232214 Photo


COO
827 posts

Been looking into this and added (parts of) this to our product roadmap. Expect to see it in one of the upcoming releases.

We are hesitant to allow for adding content with CSS (amongst others for accessibility and SEO reasons). The example you mention — icon in a button — is valid but we prefer to create an HTML element for that so all actual content is on the page. If the reason for this is editing multiple instances of an element at the same time, we'll have another (better) solution for that in one of the next releases as well (that it will be uber cool is the only thing I can say about that for now... :P)

If there's a use case for adding content with CSS that we missed, please let us know.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 434929 Photo


Ambassador
938 posts

Cool ! Thanks for attention on this feature.
Let see what you will have for us on this and again my expectation is quite high on this :)

Guys at coffeecup are awesometacular.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.