CSS code snippet that helps place custom texts before or after generated contents
Overview
From time to time, custom generated contents via shortcodes or modules miss certain ways to place contents above or below them. The following CSS code snippets help place texts whenever necessary.
Please note: Some of the links below are affiliate links, meaning, at no additional cost to you, I will earn a commission if you click through and make a purchase.
Topic Keywords:
- Custom Texts
- Monarch Plugin
- Divi Theme
- Cascading Style Sheets (CSS)
- Child Theme
- Theme Customizer
Down with the Details
In the last article on “Center-aligning Inline Share button”, the button contents generated by Monarch plugin lacked a section header that says something like “SHARE THIS”. One way to do this is to manually add the header to each of the pages or blog posts where the said module is configured to show up.
The problem with this is that there are times when the resulting layout has inconsistent spacing and padding measurements in relation to the area where the generated content is seen.
The CSS code snippets :before, :after and, content: “HEADER_TEXT_GOES_HERE” does the trick of showing a custom header text before or after the generated contents.
In the example below, the SHARE THIS and THANK YOU header texts would be shown above and below Monarch’s inline share buttons.
css
ul.et_social_icons_container:before {
content: “SHARE THIS”;
position: absolute;
top: 0;
}
ul.et_social_icons_container:after {
content: “THANK YOU”;
position: relative;
top: 30px;
}
The position: absolute snippet makes sure the SHARE THIS header text always stays on the same area above the generated code. On the other hand, the position: relative snippet places the THANK YOU header text on an area below the generated code.
About this Post
The topic posted above is the result of some work done for clients in the past that required customizations. The codes were discovered after doing source code inspections, trying out various CSS code snippets and coordination with Elegantthemes – the creators of Monarch Plugin and Divi Theme – for further advice whenever necessary.