Pseudo-element Practice


by Jeremy Caudle
notes

Today I practiced working with the ::after, ::before, and ::first-line pseudo-elements. Gotta tackle something different everyday to help keep things fresh in my gradually degrading memory.

I struggle to figure out what to make each day for these little code doodles. I think I need to set aside some time to gather some useful content to share. That would make me these feel less rushed and useless outside of just being practice. I think this Black Lives Matter site is always a good resource to share. Help make the world a better place.

View the code:

HTML and JS 
<section class="codedoodle-block">

        <p>I struggle to figure out what to make each day for these little code doodles. I think I need to set aside some time to gather some useful content to share. That would make me these feel less rushed and useless outside of just being practice. I think this <a href="https://blacklivesmatters.carrd.co/">Black Lives Matter site</a> is always a good resource to share. Help make the world a better place.</p>

    </section>
CSS 
/* Variables */

        :root {
            --bg-color: #000000;
            --primary-color: orange;
        }

        /* Animations */

        @keyframes alpha {
            from { transform: scale(1) rotate(30deg); }
            to   { transform: scale(1.2) rotate(30deg) translateX(1rem); }
        }

        @keyframes omega {
            from { transform: scale(1) rotate(30deg); }
            to   { transform: scale(1.2) rotate(30deg) translateX(-1rem); }
        }

        /* Code Block styles */
        section.codedoodle-block a {
            color: var(--primary-color, orange);
        }

        section.codedoodle-block {
            text-align: center;
        }

        section.codedoodle-block p {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            line-height: 1.5;
            font-size: 20px;
            margin: 2rem auto;
            padding: 3rem;
            background-color: black;
            color: #dedede;
            position: relative;
            max-width: 20em;
            text-align: left;
        }

        section.codedoodle-block p::before {
            position: absolute;
            content:"\0391";
            display: block;
            background-color: transparent;
            top: -1rem;
            left: .66rem;
            font-size: 2.5em;
            transform: rotate(30deg);
            color: rgba(255, 255, 255, .2);
            z-index: 2;
            text-shadow: .125rem .25rem .25rem rgba(0, 0, 0, 0.25);
            animation: alpha 3s infinite alternate;
        }

        section.codedoodle-block p::after {
            position: absolute;
            content:"\03a9"; 
            display: block;
            color: rgba(255, 255, 255, .2);
            z-index: 2;
            text-shadow: .125rem .25rem .25rem rgba(0, 0, 0, 0.25);
            bottom: -.25rem;
            right: .66rem;
            font-size: 2.5em;
            transform: rotate(-30deg);
            animation: omega 3s infinite alternate;
        }

        section.codedoodle-block p::first-line {
            font-weight: 600;
            text-shadow: 1px 0 1px var(--primary-color, orange);
        }

Tags