Fun with pseudo-elements


by Jeremy Caudle
code

Today I learned a few more uses for the ::before and ::after pseudo-elements. I also learned more about what you can style within the ::selection pseudo-element.

Everyday is an opportunity to learn more!

Today I found this excellent article, Diving into the ::before and ::after Pseudo-Elements by Will Boyd, while catching up on my RSS feeds. It was full of useful information and examples of ways to use those pseudo-elments that I had never seen. I'm glad I came across it and hope you take a look as well if you're reading this. Thank you for reading this if you are, by the way. :)

View the code:

HTML and JS 
<section class="code-block">
            <div>
            <h2>Everyday is an opportunity to learn more!</h2>
            <p>Today I found this excellent article, <a href="https://codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements/">Diving into the ::before and ::after Pseudo-Elements</a> by <a href="https://codersblock.com/about/">Will Boyd</a>, while catching up on my RSS feeds. It was full of useful information and examples of ways to use those pseudo-elments that I had never seen. I'm glad I came across it and hope you take a look as well if you're reading this. Thank you for reading this if you are, by the way. :)</p>
            </div>
        </section>
CSS 
section.code-block {
                max-width: clamp(16em, 90vw, 60em);
                background: linear-gradient(gray, rgb(109, 109, 109));
                border-radius: .5rem;
                font-family: Georgia, 'Times New Roman', Times, serif;
                min-height: 20rem;
                margin: 3rem auto;
                padding: 1rem 1.5rem;
            }

            section.code-block h2 {
                font-family: Helvetica, Arial, sans-serif;
                text-align: center;
                color: white;
                text-shadow: 0 4px rgba(0, 0, 0, 0.125);
            }
            
            section.code-block p {
                color: #ddd;
                max-width: 60ch;
                line-height: 1.5;
                transition: outline 1s ease-out;
                margin: 0 auto;
            }

            section.code-block a {
                color: orange;
            }

            section.code-block p::selection {
                background-color: #FF8000;
                color: #383838;
            }

            @supports (display:grid) {

                section.code-block {
                    display: grid;
                    place-items: center;
                }

                section.code-block h2 {
                    display: grid;
                    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
                    align-items: center;
                    grid-gap: 1rem;
                }

                section.code-block h2::before, section.code-block h2::after {
                    content: "";
                    border-bottom-style:ridge;
                    border-color: white;
                } 
            }

Tags