CSS :before and :after not working?

Question

I am trying to use :before and :after with list but it is not working. I am sure it's a simple mistake but I am not able to point it out.

Any help would be appreciated

Please check the fiddle

<div class="org-chart">
  <ul class="chart chart-prhead">
    <li>
      <span><a href="#">Dabba</a></span>
      <ul class="chart-mgr">
        <li>
          <!-- level 2 -->
          <span><a href="#">Dabba</a></span>

        </li>

      </ul>
    </li>
  </ul>
</div>

.chart ul:after {
  border: 1px solid #f30;
}
.chart li span:after {
  border: 1px solid #eee;
}
.chart li span:before {
  border: 1px solid #ccc;
}
.chart li a:after {
  border: 1px solid #666;
}
.chart li a:before {
  border: 1px solid #333;
}

Your link is broken, but it looks like you have no `content` and no styling to make them large enough to have borders. You might actually want `border-left` and `border-right`. — Alexander O'Mara, Feb 03 '16 at 14:59
I have voted to repoen, I had an issue that was not covered by the duplicate question. I think this question is open, the other only has to do with "content" — Jamie Hutber, Sep 15 '20 at 10:59

score 215 · Accepted Answer · edited Feb 03 '16 at 15:14

215

If you want :before and :after to work, you need to give them content, otherwise they don't really 'exist'. The easiest thing to do is, in the css, set content: '' for both pseudoelements.

edited Feb 03 '16 at 15:14

Igor Ivancha

3,413
4
30
39

answered Feb 03 '16 at 15:00

GMchris

5,439
4
22
40

22

You should use also `display: block` to make it work with `content:''` – Gabriel B. Feb 07 '20 at 15:34
8

When will I keep remembering this fact. Thank you. – Floris Mar 18 '20 at 11:13
1

Also, you need to make sure `position: relative` is set to the element. – Walty Yeung Mar 07 '23 at 07:16
1

@WaltyYeung You do not – GMchris Mar 28 '23 at 10:31

Enver Dzhaparoff · Answer 2 · 2021-12-03T13:01:48.433

25

You should use :before and :after selectors with content property:

.chart ul:after{
  content: "";
  border:1px solid #f30;
}

edited Dec 03 '21 at 13:01

answered Feb 03 '16 at 14:59

Enver Dzhaparoff

4,341
3
19
21

CSS :before and :after not working?

2 Answers2