CSS ::before ::after Format Problems

  • I hate to bother you with an ask, but I keep trying and failing to over-ride the theme’s default format.
    Using Additional CSS, I was able to figure out how to insert a Unicode lead character with ul li::before, but have been unable to force attributes on the text using ul li::after.
    I also have been unable to prevent the character specified in ::before, from showing up in the mobile view menu and other odd places.

    The snippet of code:

    ul {list-style: none}
    ul li::before
    {
    content: "\25EA";
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    }
    ul li::after {
    color: black;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Montserrat';
    }

    Here is the entire string that contains it in the WordPress Additional CSS section:

    .nav-head ul li a {
    font-weight: 500;
    font-size: 20px;
    font-family: 'Passero One';
    padding: 0px 0;
    }

    .page #content p a {color: black;
    text-decoration: none;
    border-bottom: 1px solid #DFDFE5;
    box-shadow: 0 -3px 0 #DFDFE5 inset;}

    .entry-content p a {color: black;
    text-decoration: none;
    border-bottom: 1px solid #DFDFE5 ;
    box-shadow: 0 -3px 0 #DFDFE5 inset;}

    .sidebar {font-family:'Montserrat'; font-size: 10px; font-weight:200;}

    .sticky-title {margin:0 0 10; padding:0px 0; border-top:1px solid #cccccc; border-bottom:1px solid #ccc; text-align:left; font-family: 'Passero One'; font-weight: 600; font-size: 26px; color:#808080;}
    .entry-meta .byline, .entry-meta .cat-links { display: none; }
    .entry-meta .posted-on { display: none;
    }
    ul {list-style: none}
    ul li::before
    {
    content: "\25EA";
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    }
    ul li::after {
    color: black;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Montserrat';
    }

    Next follows a composite image of what it looks like, what it should look like.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Tamás

    (@playwithpixels)

    Hey Muirén,

    thanks for reaching out, that’s what the support forum is for ??

    If I understand correctly there are two issues to address: The first one is the styling of the text of the list elements / links in the blogroll. The code above tries to address another (pseudo-)element after the text, with the ::after selector. If you omit the ::after it should work.

    The other thing is the ::before pseudo-element showing up in weird spaces is because the selectors match every list element on the whole page. There is a way to narrow it down to the blogroll by prepending the classname of the widget .widget_links

    So the additional CSS code would look like this:

    .widget_links ul { list-style: none }
    .widget_links ul li::before
    {
      content: "\25EA";
      display: inline-block;
      width: 1em;
      margin-left: -1em;
    }
    .widget_links ul li {
      color: black;
      font-weight: 400;
      font-size: 14px;
      font-family: 'Montserrat';
    }

    Please let me known if this solves your issues or if other things pop up.

    Best regards, Tamás

    Thread Starter Muirén Ní Sídach

    (@rhomani)

    Brilliant!???? Worked perfectly, and I’ve learned a bit more, thank you so much.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS ::before ::after Format Problems’ is closed to new replies.

Tags