Help with some CSS

jakey · Mar 29, 2023

I have been trying to get my head around this code and have failed miserably after numerous attempts. So i hope some one could please come to my rescue and tell me where i've gone wrong.

CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Placing a smiley before and after a paragraph</title>
    <style>
        p::before {
            content: url('smiley.gif');
        }
        p::after {
            content: url('smiley.gif');   
        }
    </style>
</head>
<body>
    <p>This is just some text.</p>
    <p>This is just some more text.</p>
</body>
</html>

Big thanks for any help and advice.

jakey · Mar 29, 2023

Have finally worked out what i was doing wrong so no help needed.

VBService · Jul 19, 2023

Just as a curiosity I'll add ... you can "manage" pseudo-elements like ::before and ::after, even in that way

e.g. [ full: on-line ]

CSS:

      :root {
        --main-width: 290px;
      }
      div {
        width: var(--main-width);
        font: 500 1.1rem/1.1 system-ui, monospace;
      }   
      p::before,
      p::after {
        margin: 0 .5em;
        line-height: 1.6;
      }
      p::before {
                    /* link for demonstration purposes only */
        content: url('https://picsum.photos/16/16?random=1');     
      }
      p::after {
                    /* link for demonstration purposes only */
        content: url('https://picsum.photos/16/16?random=2'); 
      }
      p.one:hover::before,
      p.one:hover::after {
        content: '';
        margin: 0 .95em;
      }
      p.two:hover::before {
        content: url('https://picsum.photos/16/16?random=2');
      }
      p.two:hover::after {
        content: url('https://picsum.photos/16/16?random=1');
      }
      p.three {
        position: relative;
        padding-left: 2em;
      }
      p.three::before,
      p.three:after {
        position: absolute;
        transition: all 2s ease-in-out;     
      }
      p.three::before {     
        left: 0;
        z-index: -1;
      }
      p.three::after {
        right: calc(1em / 3);
        z-index: 1;
      }   
      p.three:active::before {
        transform: translatex(calc(var(--main-width) - 250%));
        z-index: 1;
      }
      p.three:active::after {
        transform: translatex(calc((var(--main-width) - 250%) * -1));
        z-index: -1;
      }

Help needed with code	5	Mar 7, 2021
Need help with stripe payment	0	Oct 2, 2021
Positioning CSS components	1	Nov 16, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Help please	8	Jul 7, 2023
Help with code	0	Jun 12, 2022
Dropdown menu in a fixed navbar	2	Apr 1, 2024
Some mobile rotation issue	4	Mar 23, 2023

Help with some CSS

jakey

jakey

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads